<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layui.dtree帮助手册</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<script type="text/javascript" src="../layui/layui.js"></script>

<link rel="stylesheet" href="../layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="../layui_ext/dtree/font/dtreefont.css">

<link rel="stylesheet" href="doc.css">
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
	<div class="container">
		<div class="layui-row layui-col-space10">
			<div class="layui-fluid">
				<div class="div_h3title">
					<i class="dtreefont dtree-icon-fenguangbaobiao"></i>
					<span>dtree 数据树文档 - layui.dtree</span>
				</div>
			</div>
			
			<div class="layui-fluid">
				<blockquote class="layui-elem-quote">layui应用日益广泛的情况下，开发者对"树"这种特殊数据结构的需求日益增多，而layui-dtree的出现，极大程度的满足了各类人群对于树的不同追求。dtree发展到现在，可以总结为7大块核心功能：<b>异步加载、复选框、菜单栏、工具栏、iframe加载、定制化换肤、下拉树</b>等，你所见到市面上开源树的功能，dtree几乎全部囊括在内，只待你一一发掘，让她在你的项目中发光。</blockquote>
				<blockquote class="layui-elem-quote">
					<span style="color:#FF5722;font-weight: bold;">如何选择版本：</span>dtree发展到现在，已经更新了许多的版本，但是dtree不会安于现状，将会持续更新。<br>
					如果你是喜欢最新的版本，或具有敏锐的发现bug的嗅觉，或是希望加入到dtree的测试队伍，或是最新版中有一个内容是你正好需要的，你可以在下方或者右上角选择（git最新版）去gitee进行下载。<br>
					如果你是喜欢稳定的版本，并且具有较强的耐心，你可以下载发布的最新的（正式版本）。
				</blockquote>
				<blockquote class="layui-elem-quote">
					去gitee上下载，获取最新的内测版！（记得不要忘了Star哦~~~）（下载时请仔细阅读<span style="font-weight: bold;">readme</span>文件）<br>
					<span style="color:#FF5722;font-weight: bold;">gitee地址：</span><a href="https://gitee.com/miniwatermelon/DTreeHelper" target="_blank">https://gitee.com/miniwatermelon/DTreeHelper</a><br>
					<span style="color:#FF5722;font-weight: bold;">github地址：</span><a href="https://github.com/mini-watermelon/DTreeHelper" target="_blank">https://github.com/mini-watermelon/DTreeHelper</a><br>
					<span style="color:#FF5722;font-weight: bold;">组件官方地址：</span><a href="https://fly.layui.com/extend/dtree/" target="_blank">https://fly.layui.com/extend/dtree/</a><br>
					<span style="color:#FF5722;font-weight: bold;">组件讨论地址（v2.4.5）：</span><a href="https://fly.layui.com/jie/43868/" target="_blank">https://fly.layui.com/jie/43868/</a><br>
					<span style="color:#FF5722;font-weight: bold;">组件讨论地址（v2.5.0）：</span><a href="https://fly.layui.com/jie/52635/" target="_blank">https://fly.layui.com/jie/52635/</a>
				</blockquote>
				<blockquote class="layui-elem-quote">模块加载名称：dtree</blockquote>
			</div>
			
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="kssy">
					<legend>快速使用</legend>
					<div class="layui-field-box">
						<p>创建一个dtree实例最简单的方式是，在页面放置一个元素 <em>&lt;ul id="demoTree" class="dtree" data-id="0"&gt;&lt;/ul&gt;</em>，然后通过 <em>dtree.render()</em> 方法指定该容器，如下所示：</p>
						<div class="layui-row layui-col-space10" style="margin-top: 10px;">
							<div class="layui-col-lg4"><div style="height: 650px;overflow: auto;"><ul id="demoTree" class="dtree" data-id="0"></ul></div></div>
							<div class="layui-col-lg8">
								<p>你已经看到了一个简单树的基本样子，你一定迫不及待地想知道它的使用方式。下面就是它对应的代码：</p>
								<pre class="layui-code" lay-title="导入指定的两个css，默认需要导入layui的css和js" lay-encode="true">
								  &lt;link rel="stylesheet" href="layui/css/layui.css"&gt;
								  &lt;link rel="stylesheet" href="layui_ext/dtree/dtree.css"&gt;
								  &lt;link rel="stylesheet" href="layui_ext/dtree/font/dtreefont.css"&gt;
								  
								  &lt;script type="text/javascript" src="layui/layui.js""&gt;&lt;/script"&gt;
								</pre>
								<pre class="layui-code" lay-title="JavaScript">
								  layui.extend({
								    dtree: '{/}layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
								  }).use(['dtree','layer','jquery'], function(){
								    var dtree = layui.dtree, layer = layui.layer, $ = layui.jquery;
								    
								    // 初始化树
								    var DemoTree = dtree.render({
								      elem: "#demoTree",
								      data: demoTree, // 使用data加载
								      url: "../json/case/demoJson.json" // 使用url加载（可与data加载同时存在）
								    });
								    
								    // 绑定节点点击
								    dtree.on("node('demoTree')" ,function(obj){
								      layer.msg(JSON.stringify(obj.param));
								    });
								  });
									
								</pre>
								<p>一切都并不会陌生：绑定容器、设置数据接口、剩下的…就交给 dtree 吧。你的牛刀是否早已饥渴难耐？那么不妨现在就去小试一波吧。</p>
							</div>
						</div>
					</div>
				</fieldset>
			</div>
			
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="bccsylb">
					<legend>标签参数一览表</legend>
					<div class="layui-field-box">
						<p>树的ul元素上，与树相关的设置的属性 <em>&lt;ul id="demoTree" class="dtree" data-id="0" data-value="001"&gt;&lt;/ul&gt;</em>，如下所示：</p>
						<p style="padding: 5px 0px;">参数名称：<span style="color:#FF5722;">红色</span>：重要参数，黑色：可选参数</p>
						<table class="layui-table" lay-size="sm">
							<colgroup><col width="15%"><col width="70%"><col width="15%"></colgroup>
							<thead><tr><th>参数</th><th>说明</th><th>示例</th></tr> </thead>
							<tbody>
								<tr>
									<td><span style="color:#FF5722;">id</span></td>
									<td>树绑定的元素ID，唯一值，后面的事件监听也需要绑定ID，后续所有基于树的操作都是根据这个ID来绑定关联的。</td>
									<td>"demoTree"</td>
								</tr>
								<tr>
									<td><span style="color:#FF5722;">class</span></td>
									<td>样式，一般不需要修改</td>
									<td>"dtree"</td>
								</tr>
								<tr>
									<td><span style="color:#FF5722;">data-id</span></td>
									<td>树的加载数据中，根节点对于的parentId的值，如设置了dataFormat:"list"，则此属性必输</td>
									<td>"0"</td>
								</tr>
								<tr >
									<td>data-value<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.5新增）</span></td>
									<td>下拉树的初始值，一般为数据的ID，树会记录这个值并返回对应的context显示</td>
									<td>"001"</td>
								</tr>
							</tbody>
						</table>
					</div>
				</fieldset>
			</div>
								
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="jccsylb">
					<legend>基础参数一览表</legend>
					<div class="layui-field-box">
						<p style="padding: 5px 0px;">基础参数并非所有都要出现，有必选也有可选，结合你的实际需求自由设定。</p>
						<p style="padding: 5px 0px;">下面是目前 dtree 模块所支持的全部基础参数一览表，我对重点参数进行了的详细说明，你可以点击下述表格最右侧的“示例”去查看</p>
						<p style="padding: 5px 0px;">参数名称：<span style="color:#FF5722;">红色</span>：重要参数，黑色：可选参数，<span style="color:#c2c2c2;">灰色</span>：不需要配置项</p>
						<p style="padding: 5px 0px;">类型释义：<span style="color:#FF5722;">String</span>：字符串，<span style="color:#FF5722;">Number</span>：数字，<span style="color:#FF5722;">Dom</span>：jquery选择器选中的元素，<span style="color:#FF5722;">Boolean</span>：布尔类型值，<span style="color:#FF5722;">Object</span>：JSON对象，<span style="color:#FF5722;">Array</span>：字符串数组 / JSON数组</p>
						<table class="layui-table" lay-size="sm">
							<colgroup><col width="12%"><col width="10%"><col width="30%"><col width="13%"><col width="15%"><col width="20%"></colgroup>
							<thead><tr><th>参数</th><th>类型</th><th>说明</th><th>默认值</th><th>可选值</th><th>示例</th></tr> </thead>
							<tbody>
								<tr>
									<td colspan="6"><span style="font-weight: bold;">基础参数</span></td>
								</tr>
								<tr>
									<td><span style="color:#FF5722;">elem</span></td>
									<td>String</td>
									<td>树绑定的元素ID，唯一值，后面的事件监听也需要绑定ID，但不需要带#号。</td>
									<td>-</td>
									<td>-</td>
									<td>"#demoTree"</td>
								</tr>
								<tr>
									<td><span style="color:#FF5722;">obj</span></td>
									<td>Dom</td>
									<td>树绑定的jquery元素。</td>
									<td>$(elem)</td>
									<td>自定义Dom</td>
									<td>$("#demoTree")</td>
								</tr>
								<tr >
									<td>width<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.5新增）</span></td>
									<td>String</td>
									<td>定义树组件的宽度</td>
									<td>"260"</td>
									<td>"100%" / "320"</td>
									<td>"320"</td>
								</tr>
								<tr >
									<td>height<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.4新增）</span></td>
									<td>String</td>
									<td>定义树组件的高度，与table组件的同名属性用法一致。使用时建议将外层div容器的overflow:auto。</td>
									<td>""</td>
									<td>"200" / "full-320"</td>
									<td>"full-320"</td>
								</tr>
								<tr>
									<td><span style="color:#FF5722;">scroll</span></td>
									<td>String</td>
									<td>树的上级div容器，让树可以显示滚动条的div容器。</span></td>
									<td>"#treeDiv"</td>
									<td>-</td>
									<td><a href="javascript:void(0);" data-id="scroll" class="position-a">详见scroll</a></td>
								</tr>
								<tr >
									<td>accordion<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>Boolean</td>
									<td>开启手风琴模式。开启之后，initLevel参数设置无效（默认为1，不开启该参数的话默认为2且可以设置）</td>
									<td>false</td>
									<td>true / false</td>
									<td>true</td>
								</tr>
								<tr>
									<td>initLevel</td>
									<td>String/Number</td>
									<td>默认展开层级，当该值大于level时，则会展开树的节点，直到不大于当前待展开节点的level。</td>
									<td>2</td>
									<td>1 / 2 / 3 / 4 / 5 / ... / 999</td>
									<td>5</td>
								</tr>
								<tr>
									<td>type</td>
									<td>String</td>
									<td>加载方式，"load"为增量加载，"all"为全量加载。</td>
									<td>"load"</td>
									<td>"load" / "all"</td>
									<td>"all"</td>
								</tr>
								<tr>
									<td>cache</td>
									<td>Boolean</td>
									<td>数据缓存，开启后，当节点收缩后展开时，不会重新访问url。</td>
									<td>true</td>
									<td>true / false</td>
									<td>false</td>
								</tr>
								<tr>
									<td>record<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.4.5_finally新增）</span></td>
									<td>Boolean</td>
									<td>数据记录模式，开启后，用于记录用户提供的JSON数据串中，指定当前节点的JSON数据（排除树必须的字段）。</td>
									<td>false</td>
									<td>true / false</td>
									<td>true</td>
								</tr>
								<tr>
									<td>load<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.4.5_finally新增）</span></td>
									<td>Boolean</td>
									<td>加载遮罩，开启后，初始化加载和加载子节点时，会出现遮罩层。</td>
									<td>true</td>
									<td>true / false</td>
									<td>false</td>
								</tr>
								<tr >
									<td>none<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String</td>
									<td>用于定于树初始化未加载节点时的提示文字。</td>
									<td>无数据</td>
									<td>-</td>
									<td>无数据</td>
								</tr>
								<tr>
									<td colspan="6"><span style="font-weight: bold;">数据参数</span></td>
								</tr>
								<tr>
									<td><span style="color:#FF5722;">data</span></td>
									<td>Array</td>
									<td>树数据参数，指定该参数后<span style="color:#FF5722;">树的第一次加载不会访问异步数据接口（url）</span>。该参数的数据格式即为标准数据格式中data的内容。</td>
									<td>-</td>
									<td>-</td>
									<td>[{},{},{}...]</td>
								</tr>
								<tr>
									<td><span style="color:#FF5722;">url（等）</span></td>
									<td>String</td>
									<td>异步数据接口相关参数。其中 url 参数为必填项</td>
									<td>-</td>
									<td>-</td>
									<td><a href="javascript:void(0);" data-id="ybsjjkgf" class="position-a">详见异步数据接口规范</a></td>
								</tr>
								<tr>
									<td colspan="6"><span style="font-weight: bold;">树样式风格图标参数</span></td>
								</tr>
								<tr>
									<td >line<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>Boolean</td>
									<td>开启树线</td>
									<td>false</td>
									<td>true / false</td>
									<td>true</td>
								</tr>
								<tr>
									<td>skin</td>
									<td>String</td>
									<td>树主题。<a href="javascript:void(0);" data-id="skin" class="position-a">详见参数释义</a></td>
									<td>"theme"</td>
									<td>"theme" / "layui" / 用户自定义</td>
									<td>"zdy" / 更多请看图标及配色方案（自定义主题）</td>
								</tr>
								<tr>
									<td>ficon</td>
									<td>String / Array</td>
									<td>
										 一级图标样式，<br/>
										一级图标非叶子节点： 0：文件夹，1：方形加减，2：三角形，-1：不显示一级图标非叶子节点<br/>
										一级图标叶子节点：0：文件夹，1：人员，2：机构，3：报表，4：信息，5：叶子，6：勋章，7：文件，8：小圆点，9：齿轮，10：星星， -1：不显示一级图标叶子节点。
									</td>
									<td>"8"</td>
									<td>"-1" / "0" / "1" / "2" / "3" / "4" / "5" / "6" / "7"  / "8"  / "9"  / "10"</td>
									<td>"3" / ["0", "6"] / "-1" / ["-1", "2"]</td>
								</tr>
								<tr>
									<td>icon</td>
									<td>String / Array</td>
									<td>
										二级图标样式，<br/>
										二级图标非叶子节点：0：文件夹，1：方形加减，2：三角形，-1：不显示二级图标非叶子节点<br/>
										二级图标叶子节点：0：文件夹，1：人员，2：机构，3：报表，4：信息，5：叶子，6：勋章，7：文件，8：小圆点，9：齿轮，10：星星， -1：不显示二级图标叶子节点。
									</td>
									<td>"5"</td>
									<td>"-1" / "0" / "1" / "2" / "3" / "4" / "5" / "6" / "7"  / "8"  / "9"  / "10"</td>
									<td>"3" / ["0", "6"] / "-1" / ["-1", "2"]</td>
								</tr>
								<tr>
									<td>nodeIconArray</td>
									<td>Object</td>
									<td>用户自定义非叶子节点图标集合，作用于一级、二级节点，定义该属性会扩展组件的内置属性。</td>
									<td>一级节点默认使用编号为"1"的图标集;<br/>二级节点认使用编号为"0"的图标集。</td>
									<td><a href="javascript:void(0);" data-id="nodeIconArray" class="position-a">详见参数释义</a></td>
									<td>{"3" : {"open" : "demo-open" , "close" : "demo-close"}}</td>
								</tr>
								<tr>
									<td>leafIconArray</td>
									<td>Object</td>
									<td>用户自定义叶子节点图标集合，作用于最后一级、二级节点，定义该属性会扩展组件的内置属性。</td>
									<td>一级节点默认使用编号为"8"的图标;<br/>二级节点认使用编号为"5"的图标。</td>
									<td><a href="javascript:void(0);" data-id="leafIconArray" class="position-a">详见参数释义</a></td>
									<td>{"11" : "demo-class"}</td>
								</tr>
								<tr >
									<td>iconfont<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String / Array</td>
									<td>使用字体集。</td>
									<td>"dtreefont"</td>
									<td>"dtreefont" / ["dtreefont", "layui-icon"]</td>
									<td>["dtreefont", "layui-icon", "iconfont"]</td>
								</tr>
								<tr >
									<td>iconfontStyle<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>Object / Array</td>
									<td>具体某个元素使用的字体样式集。</td>
									<td><a href="javascript:void(0);" data-id="iconfontStyle" class="position-a">详见参数释义</a></td>
									<td>-</td>
									<td>-</td>
								</tr>
								<tr>
									<td colspan="6"><span style="font-weight: bold;">扩展模块参数</span></td>
								</tr>
								<tr>
									<td><span style="color:#FF5722;">checkbar（等）</span></td>
									<td>Boolean</td>
									<td>开启复选框模式</td>
									<td>false</td>
									<td>true / false</td>
									<td><a href="javascript:void(0);" data-id="checkbar" class="position-a">详见复选框配置</a></td>
								</tr>
								<tr>
									<td><span style="color:#FF5722;">menubar（等）</span></td>
									<td>Boolean</td>
									<td>开启菜单栏</td>
									<td>false</td>
									<td>true / false</td>
									<td><a href="javascript:void(0);" data-id="menubar" class="position-a">详见菜单栏配置</a></td>
								</tr>
								<tr>
									<td><span style="color:#FF5722;">toolbar（等）</span></td>
									<td>Boolean</td>
									<td>开启工具栏（可编辑模式）</td>
									<td>false</td>
									<td>true / false</td>
									<td><a href="javascript:void(0);" data-id="toolbar" class="position-a">详见工具栏配置</a></td>
								</tr>
								<tr>
									<td><span style="color:#FF5722;">useIframe（等）</span></td>
									<td>Boolean</td>
									<td>加载iframe</td>
									<td>false</td>
									<td>true / false</td>
									<td><a href="javascript:void(0);" data-id="useIframe" class="position-a">详见iframe加载配置</a></td>
								</tr>
								<tr >
									<td>select<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.5新增）</span></td>
									<td>Boolean</td>
									<td>开启下拉树模式，无法设置该属性,如果使用renderSelect方式渲染，则该值为true</td>
									<td>false</td>
									<td>-</td>
									<td><a href="javascript:void(0);" data-id="dtreeSelect" class="position-a">详见select加载配置</a></td>
								</tr>
								<tr>
									<td colspan="6"><span style="font-weight: bold;">重要内置参数（无需配置）</span></td>
								</tr>
								<tr>
									<td><span style="color:#FF5722;">temp</span></td>
									<td>Array</td>
									<td>内置交换变量,该变量仅对详细阅读过dtree源码的开发者使用，一般情况下不需要使用，也无需配置。</td>
									<td>-</td>
									<td>-</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#FF5722;">bak</span></td>
									<td>String</td>
									<td>内置变量，备份Html。</td>
									<td>-</td>
									<td>-</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">node</span></td>
									<td>Object</td>
									<td>当前选中节点数据</td>
									<td><a href="javascript:void(0);" data-id="node" class="position-a">详见参数释义</a></td>
									<td>-</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">checkbarNode</span></td>
									<td>Array</td>
									<td>复选框标记的全部节点数据集，即为node的集合</td>
									<td>-</td>
									<td>-</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">errData</span></td>
									<td>Array</td>
									<td>记录在渲染节点时有问题的数据集</td>
									<td><a href="javascript:void(0);" data-id="errData" class="position-a">详见参数释义</a></td>
									<td>-</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">usefontStyle</span></td>
									<td>Object</td>
									<td>内置具体某个元素使用的字体样式的JSON集。</td>
									<td>-</td>
									<td>-</td>
									<td>-</td>
								</tr>
							</tbody>
						</table>
					</div>
				</fieldset>
			</div>
			
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="jccssy" style="padding-top: 15px;">
					<legend>基础参数释义</legend>
					<div class="layui-field-box" style="background: #F2F2F2">
						<div class="layui-card card" style="margin-top:0px;" id="elemandobj">
							<div class="layui-card-header">elem和obj的区别</div>
							<div class="layui-card-body">
								elem：树绑定的元素ID。<br/>
								obj：树绑定的DOM。<br/>
								使用elem元素可以绑定已经在页面中存在的元素，而如果是页面中点击某个按钮生成的元素的话，则可以用obj来指定，这在使用layer.open()中打开一个树极为有效，它可以规避元素在生成之前被绑定从而找不到的问题。最终组件会将elem转换为obj属性，elem和obj属性必须指定一个，如果同时指定，则优先obj属性的配置项
								<pre class="layui-code" lay-title="elem参数使用示例">
									dtree.render({
									  elem: "#elemTree",
									  url: '/elemTree/elemTree.json'
									});
								</pre>
								<pre class="layui-code" lay-title="obj参数使用示例" >
									layer.open({
									  type: 1,
									  title: "目录",
									  content: '&lt;ul id="objTree" class="dtree" data-id="0"&gt;&lt;/ul&gt;',
									  area:["180px", "500px"]
									  success: function(layero, index){
									    var DTree = dtree.render({
									      obj: $(layero).find("#objTree"),
									      url: '/objTree/objTree.json'
									    });
									  }
									});
								</pre>
							</div>
						</div>
						
						<div class="layui-card card" style="margin-top:0px;" id="scroll">
							<div class="layui-card-header">scroll</div>
							<div class="layui-card-body">
								<p>当你使用的是默认的右键菜单生成的toolbar时，我们强烈建议你配置这个参数，如使用的是别的toolbarWay，则该参数无需配置。</p>
								<p>该参数是一个元素选择器的名称，可以是id选择器，也可以是class选择器，为什么需要配置这个元素，因为组件加载时，在页面中一般来说不仅仅只有一个ul元素，它必然会被一个div包裹着，而这个div可以让组件在内部自由加载，滚动等，我们需要绑定的就是这个div。当你使用了toolbar时，我们强烈建议你的dom格式为：</p>
								<pre class="layui-code" lay-title="scroll配置" lay-encode="true">
									// 给容器指定一个div，设置它的高度，并设置滚动条自动加载
									<div style="height: 350px;overflow: auto;" id="toolbarDiv">
									  <ul id="demoTree" class="dtree" data-id="0"></ul>
									</div>
									
									// 那么你的js代码既可以如此写：
									dtree.render({
									  elem: "#demoTree",
									  url: "../json/case/demo.json",
									  scroll:"#toolbarDiv", // 绑定div元素
									  toolbar:true
									});
								</pre>
								<p>再次强调，使用的是默认的右键菜单生成的toolbar时，该元素必须配置，因为它会直接影响到右键菜单的生成位置！！！</p>
							</div>
						</div>
						
						<div class="layui-card card" id="skin">
							<div class="layui-card-header">skin</div>
							<div class="layui-card-body">
								<p>满足更多人对树的不同展示，组件内置了3套风格：layui风格 / laySimple / 默认风格，内置主题会指定不同的图标和样式的默认值：</p>
								<p>一般来说，主题都内置好的属性使用者无需在指定图标等参数，当然，一切都是可自定义的。</p>
								<pre class="layui-code" lay-title="默认风格的skin设定">
									{
									 line: false, // 无树线
									 ficon:["0","8"],  // 设定一级图标样式。0表示方形加减图标，8表示小圆点图标
									 icon: ["0","5"] // 设定二级图标样式。0表示文件夹图标，5表示叶子图标
									}
									主题颜色：  #d2d2d2, #eaeceb, black, orange, #fe7786
								</pre>
								<p>主题颜色：</p>
								<div class="color-div" style="background-color: #d2d2d2"></div>
								<div class="color-div" style="background-color: #eaeceb"></div>
								<div class="color-div" style="background-color: black"></div>
								<div class="color-div" style="background-color: orange"></div>
								<div class="color-div" style="background-color: #fe7786"></div>
								<pre class="layui-code" lay-title="layui风格的skin设定">
									{
									 line: true, // 有树线
									 ficon: ["0","7"],  // 设定一级图标样式。0表示方形加减图标，7表示文件图标
									 icon: "-1" // 不设定二级图标样式。
									}
									主题颜色：#666, #5FB878
								</pre>
								<p>主题颜色：</p>
								<div class="color-div" style="background-color: #666"></div>
								<div class="color-div" style="background-color: #5FB878"></div>
								<pre class="layui-code" lay-title="laySimple风格的skin设定">
									{
									 line: false, // 无树线
									 ficon: ["1","-1"],  // 设定一级图标样式。1表示三角形图标，-1表示不设置叶子节点图标
									 icon: "-1" // 不设定二级图标样式。
									}
									主题颜色：  #d2d2d2, #eaeceb, #01AAED, #393D49
								</pre>
								<p>主题颜色：</p>
								<div class="color-div" style="background-color: #d2d2d2"></div>
								<div class="color-div" style="background-color: #eaeceb"></div>
								<div class="color-div" style="background-color: #01AAED"></div>
								<div class="color-div" style="background-color: #393D49"></div>
							</div>
						</div>
						<div class="layui-card card" id="nodeIconArray">
							<div class="layui-card-header">nodeIconArray</div>
							<div class="layui-card-body">
								<p>模块内已预定义好了一套展示方式，一般不需要用户自定义，但如果用户需要自定义图标，则需要满足如下的配置方式：</p>
								<pre class="layui-code" lay-title="预定义的nodeIconArray">
									var nodeIconArray = {
									  "-1": {"open": "dtree-icon-null-open", "close": "dtree-icon-null-close"}, //未指定
									  "0" : {"open": "dtree-icon-wenjianjiazhankai", "close": "dtree-icon-weibiaoti5"}, //文件夹
									  "1" : {"open": "dtree-icon-jian", "close": "dtree-icon-jia"},  //方形+-
									  "2" : {"open": "dtree-icon-xiangxia1", "close": "dtree-icon-xiangyou"}  //三角形
									};
								</pre>
								<p>预定义的图标一览：</p>
								<div class="icon-div"><i class="dtreefont dtree-icon-wenjianjiazhankai"></i></div>
								<div class="icon-div"><i class="dtreefont dtree-icon-weibiaoti5"></i></div>
								<div class="icon-div"><i class="dtreefont dtree-icon-jian"></i></div>
								<div class="icon-div"><i class="dtreefont dtree-icon-jia"></i></div>
								<div class="icon-div"><i class="dtreefont dtree-icon-xiangxia1"></i></div>
								<div class="icon-div"><i class="dtreefont dtree-icon-xiangyou"></i></div>
								<pre class="layui-code" lay-title="自定义的nodeIconArray">
									dtree.render({
									  nodeIconArray: {"名称从3开始": {"open": "展开样式class", "close": "收缩样式class"}}
									});
								</pre>
								<p>class为图标样式，dtree已准备好了丰富的图标，只需从中选取你喜欢的图标样式即可。</p>
							</div>
						</div>
						<div class="layui-card card" id="leafIconArray">
							<div class="layui-card-header">leafIconArray</div>
							<div class="layui-card-body">
								<p>模块内已预定义好了一套展示方式，一般不需要用户自定义，但如果用户需要自定义图标，则需要满足如下的配置方式：</p>
								<pre class="layui-code" lay-title="预定义的leafIconArray">
									var leafIconArray = {
									  "-1": "dtree-icon-null", //未指定
									  "0" : "dtree-icon-weibiaoti5", //文件夹
									  "1" : "dtree-icon-yonghu", //人员
									  "2" : "dtree-icon-fenzhijigou", //机构
									  "3" : "dtree-icon-fenguangbaobiao", //报表
									  "4" : "dtree-icon-xinxipilu", //信息
									  "5" : "dtree-icon-shuye1", //叶子（二级图标叶子节点默认样式）
									  "6" : "dtree-icon-caidan_xunzhang", //勋章
									  "7" : "dtree-icon-normal-file", //文件
									  "8" : "dtree-icon-dian", /小圆点（一级图标叶子节点默认样式）
									  "9" : "dtree-icon-set-sm", //齿轮
									  "10" : "dtree-icon-rate" //星星
									};
								</pre>
								<p>预定义的图标一览：</p>
								<div class="icon-div"><i class="dtreefont dtree-icon-weibiaoti5"></i></div>
								<div class="icon-div"><i class="dtreefont dtree-icon-yonghu"></i></div>
								<div class="icon-div"><i class="dtreefont dtree-icon-fenzhijigou"></i></div>
								<div class="icon-div"><i class="dtreefont dtree-icon-fenguangbaobiao"></i></div>
								<div class="icon-div"><i class="dtreefont dtree-icon-xinxipilu"></i></div>
								<div class="icon-div"><i class="dtreefont dtree-icon-shuye1"></i></div>
								<div class="icon-div"><i class="dtreefont dtree-icon-caidan_xunzhang"></i></div>
								<div class="icon-div"><i class="dtreefont dtree-icon-normal-file"></i></div>
								<div class="icon-div"><i class="dtreefont dtree-icon-dian"></i></div>
								<div class="icon-div"><i class="dtreefont dtree-icon-set-sm"></i></div>
								<div class="icon-div"><i class="dtreefont dtree-icon-rate"></i></div>
								
								<pre class="layui-code" lay-title="自定义的leafIconArray">
									dtree.render({
									  leafIconArray: {"名称从11开始": "样式class"}
									});
								</pre>
								<p>class为图标样式，dtree已准备好了丰富的图标，只需从中选取你喜欢的图标样式即可。</p>
							</div>
						</div>
						<div class="layui-card card" id="iconfontStyle">
							<div class="layui-card-header">iconfont 和 iconfontStyle</div>
							<div class="layui-card-body">
								<p>iconfont: 该参数为具体某个元素使用的字体样式集，默认是使用组件提供的dtreefont图标库中的图标组成的集合。在一切都默认的基础下，所有的图标都会从该图标库中取得，包括用户自定义的iconClass、自定义menubar、自定义toolbar。如需要扩展该属性，则设置的值必须将dtreefont放在第一个位置。</p>
								<pre class="layui-code" lay-title="自定义的iconfont">
									dtree.render({
									  iconfont: ["dtreefont", "layui-icon"]  // 必须将dtreefont放在第一位，后面的图标库即可由用户自定义。
									});
								</pre>
								<p>如果你实在是不想用dtreefont图标库，你可以只配置iconfont:"你自己的图标库"，但是你得确保iconfontStyle属性的每个配置项都有值。自定义的iconClass、自定义menubar、自定义toolbar使用的图标库为iconfont属性值配置的<span style="color:#FF5722;">第一个图标库</span>。</p>
								<pre class="layui-code" lay-title="自定义的iconfont和iconfontStyle">
									dtree.render({
									  iconfont: ["layui-icon", "iconfont"]  // 不使用dtreefont，则用户自定义的iconClass为该属性的第一个图标库（即在layui-icon中选择图标）。
									  iconfontStyle: [{...}] // 不使用dtreefont，则必须配置iconfontStyle参数，参数释义请往下看
									});
								</pre>
								<p>iconfontStyle: 该参数为暴露树内部使用的图标集，默认是使用组件提供的dtreefont图标库。原则上该属性与iconfont属性为一一对应关系，即如果iconfont配置的是一个字符串，则该属性即为一个Object对象；如果iconfont配置的是字符串数组，则该属性即为一个JSON数组。</p>
								<p>iconfontStyle: 最终该配置项中所有的配置，会被归纳到内置的usefontStyle属性中，即无论该配置项是JSON对象还是JSON数组，内置的元素都与usefontStyle对应。</p>
								<pre class="layui-code" lay-title="内置usefontStyle">
									var usefontStyle = {  //树最终使用的图标集合
									  fnode:{  //一级节点
									    node:{  //非叶子节点
									      open:"",  //节点展开
									      close:""  //节点关闭
									    },
									    leaf:""  //叶子节点
									  },
									  snode:{  //二级节点
									    node:{  //非叶子节点
									      open:"",  //节点展开
									      close:""  //节点关闭
									    },
									    leaf:""  //叶子节点
									  },
									  checkbox:{  //复选框
									    on:"",  //复选框选中
									    out:"",  //未选中
									    noall:""  //半选
									  },
									  menubar:{  //菜单栏
									    movedown:"",  //全部展开
									    moveup:"",  //全部收缩
									    refresh:"",  //刷新
									    remove:"",  //删除
									    search:""  //搜索
									  },
									  menubarExt:"",  //扩展菜单栏
									  toolbar:{  //工具栏
									    menubar:{  //依附在菜单栏的工具栏
									      movedown:"",  //全部展开
									      moveup:"",  //全部收缩
									      refresh:"",  //刷新
									      remove:"",  //删除
									      search:""  //搜索
									    },
									    menubarExt:"",  //依附在菜单栏的扩展菜单栏
									    add:"",  //添加
									    edit:"",  //编辑
									    del:""  //删除
									  },
									  toolbarExt:""  //扩展工具栏
									};
								</pre>
								<p>上述的这些属性中，并不是所有都得配置，你只需要配置你想更改的图标即可，其他未被显示定义的属性均会以默认值的形式最终被赋值。</p>
								<pre class="layui-code" lay-title="自定义的iconfont和iconfontStyle">
									dtree.render({
									  iconfont: ["dtreefont", "layui-icon"]  // 使用dtreefont和layui-icon图标库。
									  iconfontStyle: [{  // 第一个JSON
									    fnode:{
									      node:{
									        open: "dtree-icon-jia1"  // 这里从dtreefont图标库中选择该图标，当节点展开时，一级图标使用
									      }
									    }
									  },{   // 第二个JSON
									    checkbox:{  // 这里从layui-icon图标库中选择
									      noall:"layui-icon-rate-half",  // 复选框半选
									      on:"layui-icon-rate-solid",  // 复选框选中
									      out:"layui-icon-rate"  // 复选框未选中
									    }
									  }]   // 其他的未定义的图标均从iconfont数组中第一个图标库的图标中选择树默认的图标。
									}); 
								</pre>
								<p><span style="color:#FF5722;">树使用的图标总结：</span></p>
								<p>树使用的图标优先级排序：<span style="color:#FF5722;"> 自定义的iconClass > iconfontStyle配置项中的指定图标 > ficon 和 icon配置的图标  > 内置skin中默认使用的ficon 和 icon。</span></p>
								<p>dot属性设置决定<span style="color:#FF5722;">一级图标的叶子图标是否显示。</span></p>
								<p>自定义的iconClass、自定义menubar、自定义toolbar使用的图标库为iconfont属性中配置的<span style="color:#FF5722;">第一个图标库。</span></p>
								<p><span style="color:#FF5722;">iconfontStyle属性可以扩展树任意位置使用的图标。</span></p>
							</div>
						</div>
						<div class="layui-card card" id="node">
							<div class="layui-card-header">node</div>
							<div class="layui-card-body">
								<p>组件内置属性，当选中树节点时，会将树的当前选中节点的的结果放到该参数中，包含当前节点的全部信息</p>
								<pre class="layui-code" lay-title="内置node">
									var node = {
									  nodeId: "", //节点ID
									  parentId: "", //父节点ID
									  context: "", //节点内容
									  leaf: "", //是否叶子节点
									  level: "", //层级
									  spread: "", //节点展开状态
									  dataType: "", //节点标记
									  checked: "", //节点复选框选中状态
									  initchecked: "", //节点复选框初始状态
									  basicData: "", //用户自定义的记录节点数据
									  recordData: "", //当前data数据
									};
								</pre>
							</div>
						</div>
						<div class="layui-card card" id="errData">
							<div class="layui-card-header">errData</div>
							<div class="layui-card-body">
								<p>组件内置属性，树在递归用户数据发生问题时，记录出现问题的数据。</p>
								<p>为什么会有这个属性？因为考虑到数据的不可控性，往往有的使用者在提供数据时，会提供一些<span style="color:#FF5722;">id与parentId相同</span>的数据，而树在处理这种数据的上下级关系时，有可能会出现无限递归的现象，导致浏览器直接崩溃。因此我们考虑到了这一点，在过滤掉这层错误数据的同时记录这条数据，方便给用户提供数据错误的依据，但也只是暂时存储，如果你不想显示错误信息的话，该属性记录的数据也会被很快的抹除。</p>
								<p>在数据格式为list的数据中，如果数据发生错误，则错误的数据不会出现在页面上。而在levelRelationship的数据中，如果数据发生错误，错误的数据会被记录，<span style="color:#FF5722;">但数据也能被正常显示</span>。关于数据格式的问题请继续往下看~</p>
							</div>
						</div>
					</div>
				</fieldset>
			</div>
			
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="ybsjjkgf">
					<legend>异步数据接口规范</legend>
					<div class="layui-field-box" id="ybsjcsyl">
						<p style="padding: 5px 0px;">数据的异步请求由以下几个参数组成：</p>
						<p style="padding: 5px 0px;">参数名称：<span style="color:#FF5722;">红色</span>为重要参数，黑色为可选参数</p>
						<p style="padding: 5px 0px;">类型释义：<span style="color:#FF5722;">String</span>：字符串，<span style="color:#FF5722;">Dom</span>：jquery选择器选中的元素，<span style="color:#FF5722;">Boolean</span>：布尔类型值，<span style="color:#FF5722;">Object</span>：JSON对象，<span style="color:#FF5722;">Array</span>：字符串数组 / JSON数组，<span style="color:#FF5722;">Function</span>：回调函数</p>
						<table class="layui-table" lay-size="sm">
							<colgroup><col width="12%"><col width="10%"><col width="30%"><col width="13%"><col width="15%"><col width="20%"></colgroup>
							<thead><tr><th>参数</th><th>类型</th><th>说明</th><th>默认值</th><th>可选值</th><th>示例</th></tr> </thead>
							<tbody>
								<tr>
									<td><span style="color:#FF5722;">url</span></td>
									<td>String</td>
									<td>数据接口地址，默认请求会带上defaultRequest和request中的参数</td>
									<td>-</td>
									<td>-</td>
									<td>"/objTree/objTree.json"</td>
								</tr>
								<tr>
									<td>async</td>
									<td>Boolean</td>
									<td>同步或异步请求，默认异步。</td>
									<td>true</td>
									<td>true / false</td>
									<td>false</td>
								</tr>
								<tr >
									<td>asyncLoad<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.7新增）</span></td>
									<td>Array</td>
									<td>异步加载初始加载层级数组。</td>
									<td>[]</td>
									<td>-</td>
									<td>["003","003001"]</td>
								</tr>
								<tr>
									<td>headers</td>
									<td>Object</td>
									<td>ajax请求的headers。</td>
									<td>{}</td>
									<td>-</td>
									<td>-</td>
								</tr>
								<tr>
									<td>method</td>
									<td>String</td>
									<td>接口http请求类型。</td>
									<td>"POST"</td>
									<td>"GET" / "POST"</td>
									<td>"GET"</td>
								</tr>
								<tr>
									<td>dataType</td>
									<td>String</td>
									<td>参数类型</td>
									<td>"json"</td>
									<td>"string" / "json"</td>
									<td>"string"</td>
								</tr>
								<tr >
									<td>contentType<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String</td>
									<td>发送信息至服务器时内容编码类型</td>
									<td>"application/x-www-form-urlencoded"</td>
									<td>-</td>
									<td>-</td>
								</tr>
								<tr >
									<td>withCredentials<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.5新增）</span></td>
									<td>Boolean</td>
									<td>生成跨域的XHR对象。</td>
									<td>false</td>
									<td>true</td>
									<td>true</td>
								</tr>
								<tr>
									<td>defaultRequest</td>
									<td>Object</td>
									<td>默认请求参数。</td>
									<td><a href="javascript:void(0);" data-id="defaultRequest" class="position-a">详见defaultRequest</a></td>
									<td>-</td>
									<td>{nodeId : "id"}</td>
								</tr>
								<tr>
									<td>request</td>
									<td>Object</td>
									<td>用户自定义请求参数。</td>
									<td><a href="javascript:void(0);" data-id="request" class="position-a">详见request</a></td>
									<td>-</td>
									<td>{"username" : "admin"}</td>
								</tr>
								<tr>
									<td>filterRequest<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.4.5_finally新增）</span></td>
									<td>Array</td>
									<td>过滤树自动发起的请求中你不需要的参数。</td>
									<td>-</td>
									<td>-</td>
									<td><a href="javascript:void(0);" data-id="defaultRequest" class="position-a">详见filterRequest</a></td>
								</tr>
								<tr>
									<td>response</td>
									<td>Object</td>
									<td>返回json格式</td>
									<td><a href="javascript:void(0);" data-id="response" class="position-a">详见response</a></td>
									<td>-</td>
									<td>{statusCode : 0}</td>
								</tr>
								<tr >
									<td>beforeSend<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.7新增）</span></td>
									<td>Function</td>
									<td>树发送ajax请求前的回调函数,携带三个参数，<br/>ajax:当前操作本身的options数据，<br/>XMLHttpRequest:XMLHttp对象，<br/>self:当前ajax请求真正携带的options项。</td>
									<td>beforeSend(ajax, XMLHttpRequest:XMLHttp, self){return true;}</td>
									<td>-</td>
									<td>beforeSend(ajax, XMLHttpRequest:XMLHttp, self){return false; //取消本次请求}<br/>（可以改变形参）</td>
								</tr>
								<tr>
									<td><span style="color:#FF5722;">success</span></td>
									<td>Function</td>
									<td>加载完毕后,树解析前的回调函数,携带三个参数，<br/>res:当前异步加载的数据，<br/>$obj:当前组件的根节点的JQuery对象，<br/>first:是否首次加载。<br/>data和url加载均可使用，<br/>增量加载时，加载子节点时也可以回调该方法</td>
									<td>success:function(res, $obj, first){}</td>
									<td>-</td>
									<td>success:function(data, ul, first){}<br/>（可以改变形参）</td>
								</tr>
								<tr>
									<td><span style="color:#FF5722;">done</span></td>
									<td>Function</td>
									<td>加载完毕后,树解析后的回调函数,携带三个参数，<br/>res:当前异步加载的数据，<br/>$obj:当前组件的根节点的JQuery对象，<br/>first:是否首次加载。<br/>data和url加载均可使用，<br/>增量加载时，加载子节点时也可以回调该方法</td>
									<td>done:function(res, $obj, first){}</td>
									<td>-</td>
									<td>done:function(data, ul, first){}<br/>（可以改变形参）</td>
								</tr>
								<tr>
									<td>dataStyle</td>
									<td>String</td>
									<td>用于用户配置layui通用的json数据风格,layuiStyle:layui风格，defaultStyle：默认风格</td>
									<td>defaultStyle</td>
									<td>layuiStyle</td>
									<td>layuiStyle</td>
								</tr>
								<tr>
									<td>dataFormat</td>
									<td>String</td>
									<td>用于用户配置的data的数据格式,list:数组格式，levelRelationship：层级关系格式。<a href="javascript:void(0);" data-id="dataFormat" class="position-a">详见dataFormat</a></td>
									<td>levelRelationship</td>
									<td>list</td>
									<td>list</td>
								</tr>
								<tr >
									<td>errDataShow<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>Boolean</td>
									<td>用于是否在递归数据出现错误后，显示错误信息</td>
									<td>false</td>
									<td>true / false</td>
									<td>true</td>
								</tr>
								<tr >
									<td>formatter<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>Object</td>
									<td>用于数据过滤</td>
									<td><a href="javascript:void(0);" data-id="formatter" class="position-a">详见formatter</a></td>
									<td>-</td>
									<td>-</td>
								</tr>
								<tr >
									<td>error<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0y新增）</span></td>
									<td>Function</td>
									<td>用于异步加载中出现异常时的用户自定义函数，携带三个参数，参数含义请参考JQuery帮助文档</td>
									<td>-</td>
									<td>-</td>
									<td>function(XMLHttpRequest, textStatus, errorThrown){}</td>
								</tr>
								<tr >
									<td>complete<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0y新增）</span></td>
									<td>Function</td>
									<td>用于异步加载全部完成后用户的自定义函数，携带两个参数，参数含义请参考JQuery帮助文档</td>
									<td>-</td>
									<td>-</td>
									<td>function(XMLHttpRequest, textStatus){}</td>
								</tr>
							</tbody>
						</table>
					</div>
					
					<div class="layui-field-box" style="background: #F2F2F2">
						<div class="layui-card card" style="margin-top:0px;" id="dataurl">
							<div class="layui-card-header">data加载和url加载</div>
							<div class="layui-card-body">
								<p><span style="color:#FF5722;">只指定data</span>：树会加载data中的内容，且树一定是全量加载的。此时你需要在树的配置项中指定type:"all"，以免在最后一级节点加载完毕之后还会出现继续加载的情况。</p>
								<p><span style="color:#FF5722;">只指定url</span>：树会加载url链接，获取内容，此时树默认是增量加载的，当你点击任一非子节点时，如果该节点还未被加载子节点，则树会给当前相同的url再次发送请求以获取子节点的数据。</p>
								<p><span style="color:#FF5722;">既指定data又指定url</span>：树第一次会加载data中的内容，当你点击任一非子节点时，如果该节点还未被加载子节点，则树会向url发送请求以获取子节点的数据。</p>
							</div>
						</div>
						<div class="layui-card card" style="margin-top:0px;" id="defaultRequest">
							<div class="layui-card-header">defaultRequest</div>
							<div class="layui-card-body">
								树的默认发起请求参数格式，最后会将value作为参数名称传递
								<pre class="layui-code" lay-title="内置defaultRequest">
									var defaultRequest = {
									  nodeId: "nodeId", //节点ID
									  parentId: "parentId", //父节点ID
									  context: "context", //节点内容
									  leaf: "leaf", //是否叶子节点
									  level: "level", //层级
									  spread: "spread", //节点展开状态
									  dataType: "dataType", //节点标记
									  checked: "checked", //节点复选框选中状态
									  initchecked: "initchecked", //节点复选框初始状态
									  basicData: "basicData", //用户自定义的记录节点数据
									  recordData: "recordData", //当前data数据（排除basicData和children字段）（v2.4.5_finally版本新增）
									};
								</pre>
								<p>以上参数值，最终会作为参数名称，传递到后台进行数据查询。如果用户需要更改默认参数，则可以如此：dtree.render({dequestRequest : {nodeId : "mynodeId"}});  则进行参数拼接时，组件就会根据你配置的参数值，替换默认的参数值，进行拼接，然后传递到后台进行数据查询。</p>
							</div>
						</div>
						<div class="layui-card card" id="request">
							<div class="layui-card-header">request</div>
							<div class="layui-card-body">
								<p>除了默认参数，用户可以定义其他的一些固定参数，比如：dtree.render({request : {"username" : "用户名"}}) 。组件进行参数拼接时，则会将该属性中的串拼接到url，然后传递到后台进行数据查询。</p>
							</div>
						</div>
						<div class="layui-card card" id="filterRequest">
							<div class="layui-card-header">filterRequest</div>
							<div class="layui-card-body">
								<p>初始化、动态加载子节点、和访问iframe时，默认情况下树都会自动的拼上defaultRequest和request中配置的参数。如果你觉得参数太过于臃肿，很多的参数你用不上的话，这个参数就派上用场了。</p>
								<p>该参数是一个数组，配置项为你在defaultRequest中配置的映射的value 和 request中配置的映射key。 是不是难以理解？请看示例</p>
								<pre class="layui-code" lay-title="filterRequest">
									var DTree = dtree.render({
									  elem: "#demo",
									  url: "/demoTree.json",
									  defaultRequest:{nodeId:"tree.id",parentId:"tree.pId"},  
									  request:{username:"admin"},
									  filterRequest:["context","tree.id","username"]  // context:树默认的参数，详细可见defaultRequest中的默认参数； tree.id:在当前defaultRequest中配置的nodeId的value；username:在当前request中配置的key
									})
								</pre>
								<p>打开浏览器的调试模式，你可以看到，配置在filterRequest中的字符，将不会出现在你的请求中。</p>
							</div>
						</div>
						<div class="layui-card card" id="response">
							<div class="layui-card-header">response</div>
							<div class="layui-card-body">
								<p>树的默认返回参数格式，默认是一个json对象，以下则为json对象中的key</p>
								<pre class="layui-code" lay-title="默认response">
									var response = {
									  statusName: "code", //返回标识（必填）
									  statusCode: 200, //返回码（必填）
									  message: "message", //返回信息（必填）
									  rootName: "data", //根节点名称（必填）
									  treeId: "id", //节点ID（必填）
									  parentId: "parentId", //父节点ID（必填）
									  title: "title", //节点名称（必填）
									  ficonClass: "ficonClass", //自定义一级图标class（v2.5.4版本新增）（非必填）
									  iconClass: "iconClass", //自定义二级图标class（非必填）
									  childName: "children", //子节点名称（默认数据格式必填）
									  last: "last", //是否最后一级节点（true：是，false：否，布尔值，非必填）
									  level: "level", //层级（v2.4.5_finally_beta版本之后，该属性移除）
									  spread: "spread", //节点展开状态（v2.4.5_finally_beta版本新增。true：展开，false：不展开，布尔值，非必填）
									  disabled: "disabled", //节点禁用状态（v2.5.0版本新增。true：禁用，false：不禁用，布尔值，非必填）
									  hide: "hide", //节点隐藏状态（v2.5.0版本新增。true：隐藏，false：不隐藏，布尔值，非必填）
									  checkArr: "checkArr", //复选框列表（开启复选框必填，默认是json数组。）
									  checked: "checked", //是否选中（开启复选框，0-未选中，1-选中，2-半选。非必填）
									  type: "type", //复选框标记（开启复选框，从0开始。非必填）
									  basicData: "basicData" //表示用户自定义需要存储在树节点中的数据（非必填）
									};
								</pre>
								<p>disabled：如果配置了该属性为true，则<span style="color:#FF5722;">节点复选框不可点击，节点不可点击，节点不可双击，右键菜单不可点击，不可点击加载iframe，无法获取复选框数据</span>，但可进行节点展开/关闭，并通过内置函数获取该节点的数据。</p>
								<p>hide：如果配置了该属性为true，则<span style="color:#FF5722;">节点不可选中，节点复选框不可点击，节点不可点击，节点不可双击，右键菜单不可点击，不可点击加载iframe</span>，但可进行节点展开/关闭，可以获取复选框数据，并可以通过内置函数获取该节点的数据。</p>
								<p>以下标准数据格式，即response中的值在标准数据格式中为各参数的键（列出必填项）。</p>
								<pre class="layui-code" lay-title="默认标准返回数据格式" >
									{
									"status":{"code":200,"message":"操作成功"},
									"data": [{
									  "id":"001",
									  "title": "湖南省",
									  "parentId": "-1",
									  "checkArr": [{"type": "0", "checked": "0"}],  // 加载复选框必填
									  "children":[{  // 默认标准数据格式必填
									    "id":"001001",
									    "title": "长沙市",
									    "parentId": "001",
									    "checkArr": [{"type": "0", "checked": "0"}],
									    "children":[{
									      "id":"001001001",
									      "title": "雨花区",
									      "parentId": "001001",
									      "checkArr": [{"type": "0", "checked": "0"}]
									    }]
									  }]
									}]
									}
								</pre>
								<p>当你配置了dataStyle:"layuiStyle"，你就可以使用layui风格的数据格式了，详见左侧数据格式菜单栏。</p>
							</div>
						</div>
						<div class="layui-card card" id="dataFormat">
							<div class="layui-card-header">dataFormat</div>
							<div class="layui-card-body">
								<p>自定义data中的数据格式，这个参数适配于当你不想让后台递归生成层级关系数据，而只想让前端处理一个完整的list时使用，<span style="color:#FF5722;">接下来的使用规范，很重要：</span></p>
								<pre class="layui-code" lay-title="dataFormat规范" lay-encode="true">
									// 规范1: 页面ul元素必须指定data-id，且data-id为第一级节点的父id。
									<ul id="dataTree" class="dtree" data-id="0"></ul>
									
									// 规范2：加载的数据务必是全量的。如果是非全量数据，务必保证当前数据的被渲染出来的最后一级节点的last属性是false，否则数据也不能在被加载出来了。
									// 规范3：当使用dataFormat属性时，不需要配置cache属性，否则会引起不必要的数据加载缓慢问题。
								</pre>
								<pre class="layui-code" lay-title="使用dataFormat的标准数据格式示例" lay-encode="true">
									{
									"status":{"code":200,"message":"操作成功"},
									"data": [
									  {"id":"001","title": "湖南省","parentId": "0"},
									  {"id":"002","title": "湖北省","parentId": "0"},
									  {"id":"003","title": "广东省","parentId": "0"},
									  {"id":"004","title": "浙江省","parentId": "0"},
									  {"id":"005","title": "福建省","parentId": "0"},
									  {"id":"001001","title": "长沙市","parentId": "001"},
									  {"id":"001002","title": "株洲市","parentId": "001"},
									  {"id":"001003","title": "湘潭市","parentId": "001"},
									  {"id":"001004","title": "衡阳市","parentId": "001"},
									  {"id":"001005","title": "郴州市","parentId": "001"}
									]
									}
								</pre>
							</div>
						</div>
						<div class="layui-card card" style="margin-top:0px;" id="formatter">
							<div class="layui-card-header">formatter</div>
							<div class="layui-card-body">
								<p>目前，用户可以在树生成节点时，自己来设置生成的文字属性，可以在formatter中获取过滤函数：</p>
								<pre class="layui-code" lay-title="formatter配置函数一览">
									var formatter = {
									  title: function(data) { // 文字过滤，返回null,"",undefined之后，都不会改变原有的内容返回。
									    return data.title;
									  }
									};
								</pre>
							</div>
						</div>
					</div>
				</fieldset>
			</div>
			
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="kzcsyl">
					<legend>扩展参数一览</legend>
					<div class="layui-field-box" id="checkbar">
						<p style="padding: 5px 0px;">复选框栏的配置由以下几个参数组成：</p>
						<p style="padding: 5px 0px;">类型释义：<span style="color:#FF5722;">String</span>：字符串，<span style="color:#FF5722;">Boolean</span>：布尔类型值，<span style="color:#FF5722;">Object</span>：JSON对象</p>
						<table class="layui-table" lay-size="sm">
							<colgroup><col width="12%"><col width="10%"><col width="30%"><col width="13%"><col width="15%"><col width="20%"></colgroup>
							<thead><tr><th>参数</th><th>类型</th><th>说明</th><th>默认值</th><th>可选值</th><th>示例</th></tr> </thead>
							<tbody>
								<tr>
									<td><span style="color:#FF5722;">checkbar</span></td>
									<td>Boolean</td>
									<td>启用复选框。</td>
									<td>false</td>
									<td>true / false</td>
									<td>true</td>
								</tr>
								<tr>
									<td>checkbarLoad</td>
									<td>String</td>
									<td>复选框作用范围，node：所有节点， leaf：最后一级</td>
									<td>"node"</td>
									<td>"node" / "leaf"</td>
									<td>"leaf"</td>
								</tr>
								<tr>
									<td>checkbarType</td>
									<td>String</td>
									<td>复选框选中形式: all：子集选中父级也选中，  no-all：子集选中父级半选中，子集全选父级选中， p-casc：父级选中子集全选，子集无法改变父级选中状态， self：没有任何级联关系， only：仅存一个</td>
									<td>"all"</td>
									<td>"all" / "no-all" / "p-casc" / "self" / "only"</td>
									<td>"no-all"</td>
								</tr>
								<tr>
									<td>checkbarData</td>
									<td>String</td>
									<td>复选框记录数据类型形式，  change: 记录变更数据，choose: 记录选中数据，all: 记录全部数据，<span style="color:#FF5722;">halfChoose：记录选中和半选中的数据</span></td>
									<td>"choose"</td>
									<td>"choose" / "change" / "all" / "halfChoose"</td>
									<td>"change"</td>
								</tr>
								<tr>
									<td>checkbarFun</td>
									<td>Object</td>
									<td>复选框事件加载</td>
									<td><a href="javascript:void(0);" data-id="checkbarFun" class="position-a">详见checkbarFun</a></td>
									<td>-</td>
									<td>-</td>
								</tr>
							</tbody>
						</table>
					</div>
					
					<div class="layui-field-box" style="background: #F2F2F2">
						<div class="layui-card card" style="margin-top:0px;" id="checkbarFun">
							<div class="layui-card-header">checkbarFun</div>
							<div class="layui-card-body">
								<p>当用户需要使用树的checkbar时，首先需要将checkbar属性的值设置为true，接着在树生成后，可以对树进行：选中，取消选择的操作，当操作被触发后，可以在checkbarFun中获取操作之后的定义的函数：</p>
								<pre class="layui-code" lay-title="checkbarFun配置函数一览">
									var checkbarFun = {
									  chooseBefore: function($i, node) { //复选框点击前的回调。
									    return true;
									  }
									  chooseDone: function(checkbarNodesParam) { //复选框点击事件完毕后，返回该树关于复选框操作的全部信息。
									    return ;
									  }
									};
								</pre>
							</div>
						</div>
					</div>
					
					<div class="layui-field-box" id="menubar">
						<p style="padding: 5px 0px;">菜单栏的配置由以下几个参数组成：</p>
						<p style="padding: 5px 0px;">类型释义：<span style="color:#FF5722;">Boolean</span>：布尔类型值，<span style="color:#FF5722;">Object</span>：JSON对象，<span style="color:#FF5722;">Array</span>：字符串数组 / JSON数组</p>
						<table class="layui-table" lay-size="sm">
							<colgroup><col width="12%"><col width="10%"><col width="30%"><col width="13%"><col width="15%"><col width="20%"></colgroup>
							<thead><tr><th>参数</th><th>类型</th><th>说明</th><th>默认值</th><th>可选值</th><th>示例</th></tr> </thead>
							<tbody>
								<tr>
									<td><span style="color:#FF5722;">menubar</span></td>
									<td>Boolean</td>
									<td>启用菜单栏。</td>
									<td>false</td>
									<td>true / false</td>
									<td>true</td>
								</tr>
								<tr>
									<td><span style="color:#FF5722;">menubarTips</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.4.5_finally_beta新增）</span></td>
									<td>Array</td>
									<td>菜单栏吸附</td>
									<td><a href="javascript:void(0);" data-id="menubarTips" class="position-a">详见menubarTips</a></td>
									<td>-</td>
									<td>-</td>
								</tr>
								<tr>
									<td>menubarFun</td>
									<td>Object</td>
									<td>菜单栏事件加载</td>
									<td><a href="javascript:void(0);" data-id="menubarFun" class="position-a">详见menubarFun</a></td>
									<td>-</td>
									<td>-</td>
								</tr>
							</tbody>
						</table>
					</div>
					
					<div class="layui-field-box" style="background: #F2F2F2">
						<div class="layui-card card" style="margin-top:0px;" id="menubarTips">
							<div class="layui-card-header">menubarTips</div>
							<div class="layui-card-body">
								<p>当用户需要使用树的menubar时，默认情况下菜单栏的展示方式是在树的上方展示一排小图标，但为了方便用户自定义，现可以有三种不同的指定方式供用户展现菜单栏，更多示例请看：开启菜单栏。</p>
								<pre class="layui-code" lay-title="menubarTips默认配置一览">
									var menubarTips = {
									  toolbar: [],  //依附工具栏
									  group: ["moveDown", "moveUp", "refresh", "checkAll", "unCheckAll", "invertAll", "remove", "searchNode"], //按钮组
									  freedom: [] // 自由指定
									};
								</pre>
								<p>上面的默认指定可以看出，菜单栏默认是绑定在上方按钮组的，其中的内容即是菜单栏提供的默认功能，以下是对默认功能的解释。</p>
								<pre class="layui-code" lay-title="菜单栏默认功能一览">
									"moveDown": "展开全部节点",
									"moveUp": "收缩全部节点",
									"refresh": "刷新树",
									"checkAll": "全选节点",  // 开启复选框时设置（v2.5.0版本新增）
									"unCheckAll": "全不选节点",  // 开启复选框时设置（v2.5.0版本新增）
									"invertAll": "反选节点",  // 开启复选框时设置（v2.5.0版本新增）
									"remove": "删除选中节点",  // 开启复选框时设置
									"searchNode": "模糊查询节点"
								</pre>
								<p>用户除了可以指定默认的配置之外，还可以自定义菜单栏配置，其中自定义的JSON格式为。</p>
								<pre class="layui-code" lay-title="自定义菜单栏配置JSON格式">
									{
									  menubarId: "唯一标识该扩展按钮的ID",
									  icon: "扩展按钮的自定义图标",
									  title: "扩展按钮的文字信息",
									  handler: function(node, $div){}  //扩展按钮的回调函数
									};
								</pre>
								
							</div>
						</div>
					</div>
					
					<div class="layui-field-box" style="background: #F2F2F2">
						<div class="layui-card card" style="margin-top:0px;" id="menubarFun">
							<div class="layui-card-header">menubarFun</div>
							<div class="layui-card-body">
								<p>当用户需要使用树的menubar时，首先需要将menubar属性的值设置为true，接着在树生成后，可以对树进行：展开节点，收缩节点，删除选中节点，查询匹配节点的操作，当操作被触发后，可以在menubarFun中获取删除选中节点操作之后的定义的函数</p>
								<pre class="layui-code" lay-title="menubarFun配置函数一览">
									var menubarFun = {
									  remove: function(checkbarNodes){ //删除复选框选中节点，需要用户自定义，如未指定则树只是页面上做了修改
									    return true;
									  }
									};
								</pre>
							</div>
						</div>
					</div>
					
					<div class="layui-field-box" id="toolbar">
						<p style="padding: 5px 0px;">工具栏的配置由以下几个参数组成：</p>
						<p style="padding: 5px 0px;">类型释义：<span style="color:#FF5722;">String</span>：字符串，<span style="color:#FF5722;">Boolean</span>：布尔类型值，<span style="color:#FF5722;">Object</span>：JSON对象，<span style="color:#FF5722;">Array</span>：字符串数组 / JSON数组</p>
						<table class="layui-table" lay-size="sm">
							<colgroup><col width="12%"><col width="10%"><col width="30%"><col width="13%"><col width="15%"><col width="20%"></colgroup>
							<thead><tr><th>参数</th><th>类型</th><th>说明</th><th>默认值</th><th>可选值</th><th>示例</th></tr> </thead>
							<tbody>
								<tr>
									<td><span style="color:#FF5722;">toolbar</span></td>
									<td>Boolean</td>
									<td>启用工具栏。</td>
									<td>false</td>
									<td>true / false</td>
									<td>true</td>
								</tr>
								<tr >
									<td>toolbarWay<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String</td>
									<td>工具栏显示方式。"contextmenu"：右键菜单，"fixed"：固定在节点右侧，"follow"：跟随节点</td>
									<td>"contextmenu"</td>
									<td>"contextmenu" / "fixed" / "follow"</td>
									<td>"fixed"</td>
								</tr>
								<tr>
									<td>toolbarLoad</td>
									<td>String</td>
									<td>工具栏作用域：node:所有节点，noleaf:非最后一级节点，leaf:最后一级</td>
									<td>"node"</td>
									<td>"node" / "noleaf" / "leaf"</td>
									<td>"leaf"</td>
								</tr>
								<tr>
									<td>toolbarShow</td>
									<td>Array</td>
									<td>工具栏按钮自定义加载: add: 新增， edit：编辑， delete： 删除。<a href="javascript:void(0);" data-id="toolbarShow" class="position-a">详见toolbarShow</a></td>
									<td>["add","edit","delete"]</td>
									<td>-</td>
									<td>["pulldown","pullup"]</td>
								</tr>
								<tr>
									<td>toolbarExt</td>
									<td>Array</td>
									<td>扩展工具栏中的按钮</td>
									<td>[]</td>
									<td>-</td>
									<td><a href="javascript:void(0);" data-id="toolbarExt" class="position-a">详见toolbarExt</a></td>
								</tr>
								<tr>
									<td>toolbarBtn</td>
									<td>Array</td>
									<td>工具栏基础功能中的内容自定义添加</td>
									<td>-</td>
									<td>-</td>
									<td><a href="javascript:void(0);" data-id="toolbarBtn" class="position-a">详见toolbarBtn</a></td>
								</tr>
								<tr>
									<td>toolbarFun</td>
									<td>Object</td>
									<td>工具栏事件加载</td>
									<td><a href="javascript:void(0);" data-id="toolbarFun" class="position-a">详见toolbarFun</a></td>
									<td>-</td>
									<td>-</td>
								</tr>
								<tr>
									<td>toolbarStyle</td>
									<td>String</td>
									<td>toolbar的自定义风格。</td>
									<td>{
										 title:"节点", 
										 area:["60%","80%"] 
										}</td>
									<td>-</td>
									<td>-</td>
								</tr>
							</tbody>
						</table>
					</div>
					
					<div class="layui-field-box" style="background: #F2F2F2">
						<div class="layui-card card" style="margin-top:0px;" id="toolbarExt">
							<div class="layui-card-header">toolbarExt</div>
							<div class="layui-card-body">
								<p>该参数是一个一维数组，可以扩展toolbar的按钮：[{}]。{}中的全部内容如下：</p>
								<pre class="layui-code" lay-title="toolbarExt配置参数一览">
									{
									  toolbarId: "唯一标识该扩展按钮的ID",
									  icon: "扩展按钮的自定义图标",
									  title: "扩展按钮的文字信息",
									  handler: function(node, $div){}  //扩展按钮的回调函数
									};
								</pre>
								<pre class="layui-code" lay-title="toolbarExt配置示例">
									dtree.render({
									  toolbar: true,
									  toolbarExt:[{toolbarId: "test",icon:"dtree-icon-wefill",title:"我是自定义",handler: function(node){layer.msg(JSON.stringify(node));}}]
									});
								</pre>
							</div>
						</div>
						<div class="layui-card card" style="margin-top:0px;" id="toolbarShow">
							<div class="layui-card-header">toolbarShow</div>
							<div class="layui-card-body">
								<p>toolbarShow默认情况下是提供三个按钮供用户使用，实际上内置的还有2个按钮，用户可以自由的配置想使用的按钮。</p>
								<p>上面的默认指定可以看出，菜单栏默认是绑定在上方按钮组的，其中的内容即是菜单栏提供的默认功能，以下是对默认功能的解释。</p>
								<pre class="layui-code" lay-title="可配置在toolbarShow中的全部功能">
									"pulldown": "展开当前节点下的全部节点（v2.5.0版本新增）",
									"pullup": "收缩当前节点下全部节点（v2.5.0版本新增）",
									"add": "新增节点",
									"edit": "编辑节点",
									"delete": "删除节点"
								</pre>
							</div>
						</div>
						<div class="layui-card card" style="margin-top:0px;" id="toolbarBtn">
							<div class="layui-card-header">toolbarBtn</div>
							<div class="layui-card-body">
								<p>该参数是一个二维数组，可以指定toolbar页面中展示的内容：[[{}],[{}]]    其中，第一个[{}]表示addToolbar中的内容，第二个表示editToolbar中的内容,{}中的全部内容如下：</p>
								<pre class="layui-code" lay-title="toolbarBtn配置参数一览">
									{
									  "label": "你的label名称，除type为submit或reset外，必填",
									  "name": "你的input标签指定的name，除type为submit或reset外，必填",
									  "type": "类型，可选值有（text、textarea、select、hidden、submit（提交按钮，内部使用，设置无效）、reset（重置按钮）），可不填，默认为text",
									  "value": "input标签的默认值，可不填，默认为'' ",
									  "optionsData": "当类型为select时需要填写，表示一个json串，输出select的选项；或为一个function，在return中输出json串。type为select时必填，其他不填",
									  "id": "你的input标签指定的id，可不填"（v2.5.0版本新增）,
									  "placeholder": "你的input标签的placeholder属性，如不填，则为value值"（v2.5.0版本新增）,
									  "verify": "layui表单校验的属性（lay-verify），可不填"（v2.5.0版本新增）,
									  "defElem": "新增或编辑框中默认的表单和按钮，值为：nowChoose（当前选中）, nowChange（当前变更）, btn（提交按钮），如非默认请勿设置该属性"（v2.5.0版本新增）,
									  "readonly": "你的input标签是否只读，可不填，默认为false"（v2.5.0版本新增）,
									  "disabled": "你的input标签是否禁用，可不填，默认为false"（v2.5.0版本新增）,
									  "filter": "提交按钮需要使用的lay-filter的值，内部使用，请勿设置"（v2.5.0版本新增）
									};
								</pre>
								<pre class="layui-code" lay-title="toolbarBtn配置示例（更多配置参考开启工具栏）">
									dtree.render({
									  toolbar: true,
									  toolbarBtn: [[{"label":"text1","name":"name1","verify":"required"},{label":"text2","name":"name2","type":"textarea"}],[{"label":"text1","name":"name1","verify":"required|number"},{label":"text4","name":"name4","type":"textarea"}]]
									});
								</pre>
							</div>
						</div>
						<div class="layui-card card" style="margin-top:0px;" id="toolbarFun">
							<div class="layui-card-header">toolbarFun</div>
							<div class="layui-card-body">
								<p>当用户需要使用树的toolbar时，首先需要将toolbar属性的值设置为true，接着在树生成后，可以对树进行增删改操作，即添加节点，修改节点，删除节点，当操作被触发之后，可以在toolbarFun中获取操作之后的定义的函数:</p>
								<pre class="layui-code" lay-title="toolbarFun配置函数一览">
									var toolbarFun = {
									  addTreeNode: function(treeNode, $div) { //添加树节点后调用的函数，用于用户自定义，如未指定则树不会发生变化
									    console.log(treeNode);
									    DemoTree.changeTreeNodeAdd(treeNode.nodeId/param/true/false/"refresh"); // 调用内置函数，新增节点后改变节点内容。传入null或false，则树不会发生变化
									  },
									  editTreeNode: function(treeNode, $div) { //编辑树节点后调用的函数，用于用户自定义，如未指定则树不会发生变化
									    console.log(treeNode);
									     DemoTree.changeTreeNodeEdit(param/true/false); // 调用内置函数，修改节点后改变节点内容。传入false，则树不会发生变化
									  },
									  editTreeLoad: function(treeNode) { //编辑树的数据回显，用于打开编辑时，回填数据，用于用户自定义。
									    console.log(treeNode);
									     DemoTree.changeTreeNodeDone(param); // 调用内置函数，编辑页打开后显示编辑页内容
									  },
									  delTreeNode: function(treeNode, $div){ //删除树后调用的函数，用于用户自定义，如未指定则树不会发生变化
									    console.log(treeNode);
									    DemoTree.changeTreeNodeDel(true/false); // 调用内置函数，删除节点后改变节点内容。传入false，则树不会发生变化
									  },
									  loadToolbarBefore: function(buttons, treeNode, $div){ // 右键菜单加载前的函数
									    console.log(buttons);
									    console.log(treeNode);
									    return buttons; // 返回按钮组，如不返回则按钮将不会显示。
									  }
									};
								</pre>
								<p>treeNode参数，包含toolbarBtn中指定的name和它的值，还有默认元素，如果没有指定toolbarBtn的情况下，treeNode参数如下：</p>
								<pre class="layui-code" lay-title="treeNode默认参数">
									{
									  leaf: true,
									  level: "当前添加参数的level",
									  nodeId: "当前添加参数的动态ID",
									  nodeTitle: "当前添加参数的上级节点名称",
									  parentId: "当前添加参数的上级节点ID",
									  addNodeName: "当前添加参数的节点名称",
									  editNodeName: "当前编辑参数的节点名称，与addNodeName只出现一个"
									  basicData: "", //节点的basicData，如果没有则无
									  recordData: "" // 节点的recordData，如果没有配置record则无
									}
								</pre>
								<p>treeNode.nodeId/param/true/false/"refresh"表示的含义如下：</p>
								<table class="layui-table" lay-size="sm">
									<thead><tr><th>参数</th><th>类型</th><th>含义</th></tr> </thead>
									<tbody>
										<tr>
											<td>treeNode.nodeId</td>
											<td>String</td>
											<td>表示给方法回传一个id值，并且这个id值是通过toolbar模块自动生成的</td>
										</tr>
										<tr>
											<td>param</td>
											<td>JSON</td>
											<td>表示给方法回传一个JSON对象，该对象里面的格式就是你渲染树时的单个节点的那一条json的格式</td>
										</tr>
										<tr>
											<td>true/false</td>
											<td>Boolean</td>
											<td>true，表示成功，则方法内部自动处理节点；false，表示失败，方法内部会将该新增节点清除。编辑节点还原，删除节点恢复</td>
										</tr>
										<tr>
											<td>refresh</td>
											<td>String</td>
											<td>表示新增完成后，局部刷新。</td>
										</tr>
									</tbody>
								</table>
								<pre class="layui-code" lay-title="toolbarFun配置示例">
									var DemoTree = dtree.render({
									  toolbar: true,
									  toolbarFun: {
									    addTreeNode: function(treeNode, $div) { 
									      // 此处执行ajax，新增节点
									      $.ajax({ ..., success: function(){
									        DemoTree.changeTreeNodeAdd(true); }
									      }) // 内容省略
									    }
									  },
									});
								</pre>
							</div>
						</div>
					</div>
					
					<div class="layui-field-box" id="useIframe">
						<p style="padding: 5px 0px;">iframe模式配置由以下几个参数组成：</p>
						<p style="padding: 5px 0px;">类型释义：<span style="color:#FF5722;">Boolean</span>：布尔类型值，<span style="color:#FF5722;">Object</span>：JSON对象</p>
						<table class="layui-table" lay-size="sm">
							<colgroup><col width="12%"><col width="10%"><col width="30%"><col width="13%"><col width="15%"><col width="20%"></colgroup>
							<thead><tr><th>参数</th><th>类型</th><th>说明</th><th>默认值</th><th>可选值</th><th>示例</th></tr> </thead>
							<tbody>
								<tr>
									<td><span style="color:#FF5722;">useIframe</span></td>
									<td>Boolean</td>
									<td>是否加载Iframe。</td>
									<td>false</td>
									<td>true / false</td>
									<td>true</td>
								</tr>
								<tr>
									<td>iframeElem</td>
									<td>String</td>
									<td>iframe的ID</td>
									<td>""</td>
									<td>-</td>
									<td>"#iframe_content"</td>
								</tr>
								<tr>
									<td>iframeUrl</td>
									<td>String</td>
									<td>树关联的iframe地址</td>
									<td>""</td>
									<td>-</td>
									<td>"iframeContent.html" / "/load/iframe"</td>
								</tr>
								<tr>
									<td>iframeLoad</td>
									<td>String</td>
									<td>点击哪一层加载iframe： node：所有节点， leaf：默认，最后一级</td>
									<td>"leaf"</td>
									<td>"node" / "leaf</td>
									<td>"node"</td>
								</tr>
								<tr>
									<td>iframeDefaultRequest</td>
									<td>Object</td>
									<td>iframe的默认参数,目的是与加载树的参数不一样</td>
									<td><a href="javascript:void(0);" data-id="defaultRequest" class="position-a">详见defaultRequest</a></td>
									<td>-</td>
									<td>{nodeId : "id"}</td>
								</tr>
								<tr>
									<td>iframeRequest</td>
									<td>Object</td>
									<td>iframe的自定义参数,目的是与加载树的参数不一样</td>
									<td><a href="javascript:void(0);" data-id="request" class="position-a">详见request</a></td>
									<td>-</td>
									<td>{"username" : "admin"}</td>
								</tr>
								<tr>
									<td>iframeFun</td>
									<td>Object</td>
									<td>iframe事件加载</td>
									<td><a href="javascript:void(0);" data-id="iframeFun" class="position-a">详见iframeFun</a></td>
									<td>-</td>
									<td>-</td>
								</tr>
							</tbody>
						</table>
					</div>
					
					<div class="layui-field-box" style="background: #F2F2F2">
						<div class="layui-card card" style="margin-top:0px;" id="iframeFun">
							<div class="layui-card-header">iframeFun</div>
							<div class="layui-card-body">
								<p>当用户点击节点加载iframe后，可以在iframeFun中获取操作之后的定义的函数</p>
								<pre class="layui-code" lay-title="iframe配置参数一览">
									var iframeFun = {
									  iframeDone: function(iframeParam){ //iframe加载完毕后，用于用户自定义事件
									    return ;
									  }
									};
								</pre>
								<pre class="layui-code" lay-title="iframe配置示例">
									var DemoTree = dtree.render({
									  useIframe: true,
									  iframeElem: "#iframeId",
									  iframeUrl: "/demo/iframeurl"
									  iframeFun: {
									    iframeDone: function(iframeParam){ //iframe加载完毕后，用于用户自定义事件
									      console.log(iframeParam);
									      return ;
									    }
									  }
									});
								</pre>
							</div>
						</div>
					</div>
					
					
					<div class="layui-field-box" id="dtreeSelect" >
						<p style="padding: 5px 0px;">select模式配置由以下几个参数组成：</p>
						<p style="padding: 5px 0px;">类型释义：<span style="color:#FF5722;">Boolean</span>：布尔类型值，<span style="color:#FF5722;">Object</span>：JSON对象</p>
						<table class="layui-table" lay-size="sm">
							<colgroup><col width="12%"><col width="10%"><col width="30%"><col width="13%"><col width="15%"><col width="20%"></colgroup>
							<thead><tr><th>参数</th><th>类型</th><th>说明</th><th>默认值</th><th>可选值</th><th>示例</th></tr> </thead>
							<tbody>
								<tr>
									<td><span style="color:#FF5722;">select</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.5新增）</span></td>
									<td>Boolean</td>
									<td>开启下拉树模式，无法设置该属性,如果使用renderSelect方式渲染，则该值为true。</td>
									<td>false</td>
									<td>-</td>
									<td>-</td>
								</tr>
								<tr>
									<td>selectInitVal<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.5新增）</span></td>
									<td>String</td>
									<td>下拉树初始ID值</td>
									<td>""</td>
									<td>-</td>
									<td>"001"</td>
								</tr>
								<tr>
									<td>selectTips<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.5新增）</span></td>
									<td>String</td>
									<td>下拉树无值提示值</td>
									<td>"请选择"</td>
									<td>-</td>
									<td>"我是一个提示"</td>
								</tr>
								<tr>
									<td>selectInputName<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.5新增）</span></td>
									<td>Object</td>
									<td>下拉树内部表单标签的name键值对</td>
									<td>{nodeId: this.obj[0].id + "_select_nodeId"}</td>
									<td>-</td>
									<td>{nodeId: "id",context: "title"}</td>
								</tr>
							</tbody>
						</table>
					</div>
					<p style="padding: 5px 0px;">select模式实际上可以配置所有的基础参数，具体使用方法可以参考右侧-使用下拉树</p>
				</fieldset>
			</div>
			
			<div class="layui-field-box" style="background: #F2F2F2">
				<div class="layui-card card" style="margin-top:0px;" id="selectInputName">
					<div class="layui-card-header">selectInputName<span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.5新增）</span></div>
					<div class="layui-card-body">
						<p>用于配置select中表单的键值对，key值为树中可以获取到的值的名称，value值为表单的name</p>
						<p>如果没有配置defaultRequest，则该配置的key与node一致，否则，key与defaultRequest映射的value一致。</p>
						<pre class="layui-code" lay-title="可设置的参数一览">
							{
							  nodeId: "", //节点ID
							  parentId: "", //父节点ID
							  context: "", //节点内容
							  leaf: "", //是否叶子节点
							  level: "", //层级
							  spread: "", //节点展开状态
							  dataType: "", //节点标记
							  checked: "", //节点复选框选中状态
							  initchecked: "", //节点复选框初始状态
							  basicData: "", //用户自定义的记录节点数据
							  recordData: "", //当前data数据
							}
						</pre>
						<pre class="layui-code" lay-title="selectInputName配置示例">
							dtree.render({
							  elem: "#selTree4",
							  url: "../json/case/asyncTree1.json",
							  selectInputName: {
							    nodeId: "id",  // 这里，内置表单名称为id，值为nodeId的值
							    context: "title"  // 这里，内置表单名称为title，值为context的值
							  }
							});
						</pre>
					</div>
				</div>
			</div>
			
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="jcff">
					<legend>基础方法</legend>
					<div class="layui-field-box">
						<p style="padding: 5px 0px;">基础方法均以dtree.开头，后面接上方法名。</p>
						<p style="padding: 5px 0px;">下面是目前 dtree 模块所支持的全部基础方法一览表</p>
						<p style="padding: 5px 0px;">方法名称：<span style="color:#FF5722;">红色</span>为重要方法</p>
						<p style="padding: 5px 0px;">类型释义：<span style="color:#FF5722;">String</span>：字符串，<span style="color:#FF5722;">Object</span>：JSON对象</p>
						<table class="layui-table" lay-size="sm">
							<colgroup><col width="20%"><col width="10%"><col width="20%"><col width="50%"></colgroup>
							<thead><tr><th>方法名称</th><th>参数类型</th><th>说明</th><th>用法示例</th></tr></thead>
							<tbody>
								<tr id="set" >
									<td><span style="color:#FF5722;">set</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.5新增）</span></td>
									<td>Object</td>
									<td>全局配置，与table组件的全局配置概念一致。在同一次引用中，dtree的公共属性指定，在render中可以不指定。</td>
									<td>
										<pre class="layui-code" lay-title="set方法示例">
										// 这段代码可以直接应用到layuiAdmin-pro中
										dtree.set({
										  headers: {access_token: layui.data(setter.tableName).access_token},
										  withCredentials: true,
										  error: function(XMLHttpRequest, textStatus, errorThrown){
										    // 出错则重定向到主页
										    if(textStatus == setter.response.statusCode.logout){
										      view.exit();
										    }
										  }
										});
										</pre>
									</td>
								</tr>
								<tr id="render">
									<td><span style="color:#FF5722;">render</span></td>
									<td>Object</td>
									<td>初始化树</td>
									<td>
										<pre class="layui-code" lay-title="render方法示例">
											var DemoTree = dtree.render({
											  elem: '#siTree',
											  url: '/siTree.json',
											  initLevel: 2,
											  icon: 3
											});
										</pre>
									</td>
								</tr>
								<tr id="reload">
									<td><span style="color:#FF5722;">reload</span></td>
									<td>String / Object, Object</td>
									<td>重新加载</td>
									<td>
										<pre class="layui-code" lay-title="reload方法示例">
											dtree.reload(DemoTree, {
											  url: '/demoTree2.json',
											  initLevel: 2,
											  icon: 3
											});
										</pre>
									</td>
								</tr>
								<tr id="renderSelect" >
									<td><span style="color:#FF5722;">renderSelect</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.5新增）</span></td>
									<td>Object</td>
									<td>初始化下拉树树</td>
									<td>
										<pre class="layui-code" lay-title="renderSelect方法示例">
											var DemoSelectTree = dtree.renderSelect({
											  elem: '#siTree',
											  url: '/siTree.json',
											  selectTips: "我想做一个提示语"
											});
										</pre>
									</td>
								</tr>
								<tr id="click1" >
									<td>click<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String / Object, String</td>
									<td>模拟单击事件</td>
									<td>
										<pre class="layui-code" lay-title="click方法示例">
											var DemoTree = dtree.render({
											  elem: '#siTree',
											  url: '/siTree.json',
											  done: function(res, $ul, first){
											    if(first) {
											      dtree.click(DemoTree, "001"); // 会自动帮你触发一次对应Id的节点的点击事件
											    }
											  }
											});
											
										</pre>
									</td>
								</tr>
								<tr id="getNowParam">
									<td>getNowParam</td>
									<td>String / Object</td>
									<td>获取当前选中值</td>
									<td>
										<pre class="layui-code" lay-title="getNowParam方法示例">
											var param = dtree.getNowParam(DemoTree);
											console.log(param);
										</pre>
									</td>
								</tr>
								<tr id="getParam" >
									<td>getParam<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String / Object, String</td>
									<td>获取指定节点选中值</td>
									<td>
										<pre class="layui-code" lay-title="getParam方法示例">
											var param = dtree.getParam("demoTree", "001"); //获取ID为001的节点的值
											console.log(param);
										</pre>
									</td>
								</tr>
								<tr id="getParentParam">
									<td>getParentParam</td>
									<td>String / Object, String</td>
									<td>获取上级节点值</td>
									<td>
										<pre class="layui-code" lay-title="getParentParam方法示例">
											var param = dtree.getParentParam(DemoTree, "001001");
											console.log(param);
										</pre>
									</td>
								</tr>
								<tr id="getAllParentParam" >
									<td>getAllParentParam<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String / Object, String</td>
									<td>获取全部上级节点值</td>
									<td>
										<pre class="layui-code" lay-title="getAllParentParam方法示例">
											var arr = dtree.getAllParentParam(DemoTree, "001001001");
											console.log(arr);
										</pre>
									</td>
								</tr>
								<tr id="getChildParam">
									<td>getChildParam<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.4.5_finally_beta新增）</span></td>
									<td>String / Object, String</td>
									<td>获取下级节点值集</td>
									<td>
										<pre class="layui-code" lay-title="getChildParam方法示例">
											var param = dtree.getChildParam(DemoTree, "dataId");
											console.log(param);
										</pre>
									</td>
								</tr>
								<tr id="changeCheckbarNodes">
									<td>changeCheckbarNodes</td>
									<td>String / Object</td>
									<td>判断复选框是否发生变更</td>
									<td>
										<pre class="layui-code" lay-title="changeCheckbarNodes方法示例">
											var flag = dtree.changeCheckbarNodes("demoTree");
											console.log(flag);
										</pre>
									</td>
								</tr>
								<tr id="dataInit">
									<td>dataInit</td>
									<td>String / Object, String</td>
									<td>初始化选中节点，并设值</td>
									<td>
										<pre class="layui-code" lay-title="dataInit方法示例">
											var DemoTree = dtree.render({
											  elem: '#demoTree',
											  url: '/demoTree.json',
											  done: function(res, $ul, first){
											    if(first) {
											      var params = dtree.dataInit("demoTree", "001");
											    }
											  }
											});
										</pre>
									</td>
								</tr>
								<tr id="chooseDataInit">
									<td>chooseDataInit</td>
									<td>String / Object, String / Array</td>
									<td>初始化选中复选框，并设值，不会带上任何级联关系</td>
									<td>
										<pre class="layui-code" lay-title="chooseDataInit方法示例">
											var DemoTree = dtree.render({
											  elem: '#demoTree',
											  url: '/demoTree.json',
											  done: function(res, $ul, first){
											    if(first) {
											      var params = dtree.chooseDataInit("demoTree", "001,002,003"); // 字符串形式
											      var params = dtree.chooseDataInit("demoTree", ["001","002","003"]); // 数组形式
											      var params = dtree.chooseDataInit("demoTree", 123); // 单个赋值可以不带字符串
											      // 多级复选框
											      var params = dtree.chooseDataInit("demoTree",[["001001","001002"],["001003","001004"]]);
											    }
											  }
											});
										</pre>
									</td>
								</tr>
								<tr id="getCheckbarNodesParam">
									<td>getCheckbarNodesParam</td>
									<td>String / Object</td>
									<td>获取复选框选中值</td>
									<td>
										<pre class="layui-code" lay-title="getCheckbarNodesParam方法示例">
											var params = dtree.getCheckbarNodesParam("demoTree");
											console.log(params);
										</pre>
									</td>
								</tr>
								<tr id="getCheckbarJsonArrParam" >
									<td>getCheckbarJsonArrParam<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.7新增）</span></td>
									<td>String / Object</td>
									<td>获取复选框选中值（基于返回参数）</td>
									<td>
										<pre class="layui-code" lay-title="getCheckbarJsonArrParam方法示例">
											var params = dtree.getCheckbarJsonArrParam("demoTree");
											console.log(params);
										</pre>
									</td>
								</tr>
								<tr id="initNoAllCheck" >
									<td>initNoAllCheck<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String / Object</td>
									<td>复选框半选状态初始化设置，用于给初始选中的复选框反选级联关系</td>
									<td>
										<pre class="layui-code" lay-title="initNoAllCheck方法示例">
											var DemoTree = dtree.render({
											  elem: '#demoTree',
											  url: '/demoTree.json',
											  done: function(res, $ul, first){
											    if(first) {
											      dtree.initNoAllCheck("demoTree");
											    }
											  }
											});
										</pre>
									</td>
								</tr>
								<tr id="initAllCheck" >
									<td>initAllCheck<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String / Object</td>
									<td>复选框选中状态初始化设置，用于给初始选中的复选框反选级联关系</td>
									<td>
										<pre class="layui-code" lay-title="initAllCheck方法示例">
											var DemoTree = dtree.render({
											  elem: '#demoTree',
											  url: '/demoTree.json',
											  done: function(){
											    dtree.initAllCheck("demoTree");
											  }
											});
										</pre>
									</td>
								</tr>
								<tr id="selectVal" >
									<td>selectVal<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.5新增）</span></td>
									<td>String / String</td>
									<td>设置下拉树的初始展示值</td>
									<td>
										<pre class="layui-code" lay-title="selectVal方法示例">
											var DemoTree = dtree.renderSelect({
											  elem: '#demoTree',
											  url: '/demoTree.json',
											  done: function(res, $ul, first)){
											    if(first) {
											      dtree.selectVal("demoTree"); // 如不传第二个参数，则树会自动根据当前选中节点回显值
												  //dtree.selectVal("demoTree", "值");
											    }
											   
											  }
											});
										</pre>
									</td>
								</tr>
								<tr id="escape">
									<td>escape</td>
									<td>String</td>
									<td>字符串格式化</td>
									<td>
										<pre class="layui-code" lay-title="escape方法示例">
											var html = dtree.escape("需要被格式化的内容");
											console.log(html);
										</pre>
									</td>
								</tr>
								<tr id="unescape">
									<td>unescape</td>
									<td>String</td>
									<td>字符串反格式化</td>
									<td>
										<pre class="layui-code" lay-title="unescape方法示例">
											var html = dtree.unescape("需要被反格式化的内容");
											console.log(html);
										</pre>
									</td>
								</tr>
								<tr id="serialize" >
									<td>serialize<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.7新增）</span></td>
									<td>String, Object</td>
									<td>序列化JSON对象</td>
									<td>
										<pre class="layui-code" lay-title="serialize方法示例">
										var param = dtree.getNowParam("demoTree");
										//第一个参数为序列化字符串头部字符，第二个参数为JSON对象
										var data = dtree.serialize("", param); 
										console.log(data);
										</pre>
									</td>
								</tr>
								<tr id="version">
									<td>version</td>
									<td>-</td>
									<td>获取组件版本信息</td>
									<td>
										<pre class="layui-code" lay-title="version方法示例">
											var v = dtree.version();
											console.log(v);
										</pre>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</fieldset>
			</div>
			
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="yingxiang">
					<legend>注意事项</legend>
					<div class="layui-field-box">
						<p style="padding: 5px 0px;">以下列出重复使用<span style="color:#FF5722;">dtree.render</span>或使用<span style="color:#FF5722;">dtree.reload</span>或使用<span style="color:#FF5722;">dtree.renderSelect</span>方法之后对内置属性的影响：</p>
						<p style="padding: 5px 0px;"><span style="color:#5FB878">覆盖</span>：即会重新定义该属性。</p>
						<p style="padding: 5px 0px;"><span style="color:#FFB800">扩展</span>：即会在该属性原有的基础定义上扩展该属性。</p>
						<!-- <p style="padding: 5px 0px;"><span style="color:#FF5722">无效</span>：即重复定义无效，只生效于第一次定义的属性。</p> -->
						<table class="layui-table" lay-size="sm">
							<thead><tr><th>属性</th><th>影响</th><th>属性</th><th>影响</th><th>属性</th><th>影响</th></tr></thead>
							<tbody>
								<tr><td colspan="6"><span style="font-weight: bold;">基础参数</span></td></tr>
								<tr><td>initLevel</td><td><span style="color:#5FB878">覆盖</span></td><td>type</td><td><span style="color:#5FB878">覆盖</span></td><td>elem</td><td><span style="color:#5FB878">覆盖</span></td></tr>
								<tr><td>accordion</td><td><span style="color:#5FB878">覆盖</span></td><td>cache</td><td><span style="color:#5FB878">覆盖</span></td><td>obj</td><td><span style="color:#5FB878">覆盖</span></td></tr>
								<tr><td>record</td><td><span style="color:#5FB878">覆盖</span></td><td>load</td><td><span style="color:#5FB878">覆盖</span></td><td>none</td><td><span style="color:#5FB878">覆盖</span></td></tr>
								<tr><td>scroll</td><td><span style="color:#5FB878">覆盖</span></td><td>width</td><td><span style="color:#5FB878">覆盖</span></td><td>height</td><td><span style="color:#5FB878">覆盖</span></td></tr>
								
								<tr><td colspan="6"><span style="font-weight: bold;">数据参数</span></td></tr>
								<tr><td>data</td><td><span style="color:#5FB878">覆盖</span></td><td>headers</td><td><span style="color:#5FB878">覆盖</span></td><td>defaultRequest</td><td><span style="color:#FFB800">扩展</span></td></tr>
								<tr><td>url</td><td><span style="color:#5FB878">覆盖</span></td></td><td>method</td><td><span style="color:#5FB878">覆盖</span><td>response</td><td><span style="color:#FFB800">扩展</span></tr>
								<tr><td>async</td><td><span style="color:#5FB878">覆盖</span></td><td>dataType</td><td><span style="color:#5FB878">覆盖</span></td><td>request</td><td><span style="color:#5FB878">覆盖</span></td></tr>
								<tr><td>contentType</td><td><span style="color:#5FB878">覆盖</span></td><td>withCredentials</td><td><span style="color:#5FB878">覆盖</span></td><td>filterRequest</td><td><span style="color:#5FB878">覆盖</span></td></tr>
								<tr><td>asyncLoad</td><td><span style="color:#5FB878">覆盖</span></td><td>dataFormat</td><td><span style="color:#5FB878">覆盖</span></td><td>dataStyle</td><td><span style="color:#5FB878">覆盖</span></tr>
								<tr></td><td>success</td><td><span style="color:#5FB878">覆盖</span></td><td>done</td><td><span style="color:#5FB878">覆盖</span></td><td>complete</td><td><span style="color:#5FB878">覆盖</span></td></tr>
								<tr><td>error</td><td><span style="color:#5FB878">覆盖</span></td><td>errDataShow</td><td><span style="color:#5FB878">覆盖</span></td><td>formatter</td><td><span style="color:#5FB878">覆盖</span></td></tr>
								
								<tr><td colspan="6"><span style="font-weight: bold;">树样式风格图标参数</span></td></tr>
								<tr><td>skin</td><td><span style="color:#5FB878">覆盖</span></td><td>ficon</td><td><span style="color:#5FB878">覆盖</span></td><td>nodeIconArray</td><td><span style="color:#FFB800">扩展</span></td></tr>
								<tr><td>line</td><td><span style="color:#5FB878">覆盖</span></td><td>icon</td><td><span style="color:#5FB878">覆盖</span></td><td>leafIconArray</td><td><span style="color:#FFB800">扩展</span></td></tr>
								<tr><td>iconfont</td><td><span style="color:#5FB878">覆盖</span></td><td>iconfontStyle</td><td><span style="color:#5FB878">覆盖</span></td><td> </td><td><span style="color:#FFB800"> </span></td></tr>
								
								<tr><td colspan="6"><span style="font-weight: bold;">复选框参数</span></td></tr>
								<tr><td>checkbar</td><td><span style="color:#5FB878">覆盖</span></td><td>checkbarLoad</td><td><span style="color:#5FB878">覆盖</span></td><td>checkbarType</td><td><span style="color:#5FB878">覆盖</span></td></tr>
								<tr><td>checkbarData</td><td><span style="color:#5FB878">覆盖</span></td><td>checkbarFun</td><td><span style="color:#5FB878">覆盖</span></td><td> </td><td> </td></tr>
								
								<tr><td colspan="6"><span style="font-weight: bold;">菜单栏参数</span></td></tr>
								<tr><td>menubar</td><td><span style="color:#5FB878">覆盖</span></td><td>menubarTips</td><td><span style="color:#5FB878">覆盖</span></td><td>menubarFun</td><td><span style="color:#5FB878">覆盖</span></td></tr>
								
								<tr><td colspan="6"><span style="font-weight: bold;">工具栏参数</span></td></tr>
								<tr><td>toolbar</td><td><span style="color:#5FB878">覆盖</span></td><td>toolbarStyle</td><td><span style="color:#5FB878">覆盖</span></td><td>toolbarWay</td><td><span style="color:#5FB878">覆盖</span></td></tr>
								<tr><td>toolbarLoad</td><td><span style="color:#5FB878">覆盖</span></td><td>toolbarShow</td><td><span style="color:#5FB878">覆盖</span></td><td>toolbarBtn</td><td><span style="color:#5FB878">覆盖</span></td></tr>
								<tr><td>toolbarExt</td><td><span style="color:#5FB878">覆盖</span></td><td>toolbarFun</td><td><span style="color:#5FB878">覆盖</span></td><td> </td><td> </td></tr>
								
								<tr><td colspan="6"><span style="font-weight: bold;">iframe模式参数</span></td></tr>
								<tr><td>useIframe </td><td><span style="color:#5FB878">覆盖</span></td><td>iframeElem</td><td><span style="color:#5FB878">覆盖</span></td><td>iframeDefaultRequest</td><td><span style="color:#FFB800">扩展</span></td></tr>
								<tr><td>iframeUrl</td><td><span style="color:#5FB878">覆盖</span></td><td>iframeLoad</td><td><span style="color:#5FB878">覆盖</span></td><td>iframeRequest</td><td><span style="color:#FFB800">扩展</span></td></tr>
								<tr><td>iframeFun</td><td><span style="color:#5FB878">覆盖</span></td><td> </td><td><span style="color:#5FB878"> </span></td><td> </td><td><span style="color:#5FB878"></span></td></tr>
							
								<tr><td colspan="6"><span style="font-weight: bold;">下拉树参数</span></td></tr>
								<tr><td>selectTips</td><td><span style="color:#5FB878">覆盖</span></td><td>selectInitVal</td><td><span style="color:#5FB878">覆盖</span></td><td>selectInputName</td><td><span style="color:#FFB800">扩展</span></td></tr>
							
							</tbody>
						</table>
					</div>
				</fieldset>
			</div>
			
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="sjjt">
					<legend>事件监听</legend>
					<div class="layui-field-box">
						<p style="padding: 5px 0px;">事件监听均绑定在on中的方法，用法：dtree.on(“方法名称(树的id)”, function(参数){});</p>
						<p style="padding: 5px 0px;">下面是目前 dtree 模块所支持的事件方法一览表</p>
						<p style="padding: 5px 0px;">方法名称：<span style="color:#FF5722;">红色</span>为常用方法</p>
						<table class="layui-table" lay-size="sm">
							<colgroup><col width="20%"><col width="10%"><col width="20%"><col width="50%"></colgroup>
							<thead><tr><th>方法名称</th><th>回调参数类型</th><th>说明</th><th>用法示例</th></tr></thead>
							<tbody>
								<tr id="changeTree">
									<td>changeTree</td>
									<td>Object</td>
									<td>树状态改变（收缩/张开）后，用户自定义想做的事情</td>
									<td>
										<pre class="layui-code" lay-title="changeTree方法示例">
											dtree.on("changeTree('demoTree')" ,function(obj){
											  console.log(obj.param); // 点击当前节点传递的参数
											  console.log(obj.dom); // 当前节点的jquery对象
											  console.log(obj.show); // 节点展开为true，关闭为false
											});
										</pre>
									</td>
								</tr>
								<tr id="nodeclick">
									<td><span style="color:#FF5722;">node</span></td>
									<td>Object</td>
									<td>单击事件执行完毕后，用户自定义想做的事情</td>
									<td>
										<pre class="layui-code" lay-title="node方法示例">
											dtree.on("node('demoTree')" ,function(obj){
											  console.log(obj.param); // 点击当前节点传递的参数
											  console.log(obj.dom); // 当前节点的jquery对象
											  console.log(obj.childParams); // 当前节点的所有子节点参数
											  console.log(obj.parentParam); // 当前节点的父节点参数
											});
										</pre>
									</td>
								</tr>
								<tr id="nodedblclick">
									<td><span style="color:#FF5722;">nodedblclick</span></td>
									<td>Object</td>
									<td>双击事件执行完毕后，用户自定义想做的事情</td>
									<td>
										<pre class="layui-code" lay-title="nodedblclick方法示例">
											dtree.on("nodedblclick('demoTree')" ,function(obj){
											  console.log(obj.param); // 点击当前节点传递的参数
											  console.log(obj.dom); // 当前节点的jquery对象
											  console.log(obj.childParams); // 当前节点的所有子节点参数
											  console.log(obj.parentParam); // 当前节点的父节点参数
											});
										</pre>
									</td>
								</tr>
								<tr id="chooseDone">
									<td>chooseDone</td>
									<td>Object</td>
									<td>用户点击复选框后，用户自定义想做的事情</td>
									<td>
										<pre class="layui-code" lay-title="chooseDone方法示例">
											dtree.on("chooseDone('demoTree')" ,function(obj){
											  console.log(obj.checkbarParams); // 选中的所有复选框的参数
											});
										</pre>
									</td>
								</tr>
								<tr id="iframeDone">
									<td>iframeDone</td>
									<td>Object</td>
									<td>iframe加载完毕后，用户自定义想做的事情，<span style="color:#FF5722;">注意：该方法与node方法为互斥方法，在开启iframe功能后，如果点击节点加载了iframe则会回调该方法，如没加载，则会回调node方法。</span></td>
									<td>
										<pre class="layui-code" lay-title="iframeDone方法示例">
											dtree.on("iframeDone('demoTree')" ,function(obj){
											  console.log(obj.iframeParam); // 点击当前节点传递的参数
											  console.log(obj.dom); // 当前节点的jquery对象
											});
										</pre>
									</td>
								</tr>
								<tr id="changeSelect">
									<td>changeSelect</td>
									<td>Object</td>
									<td>下拉树面板开闭状态改变后，用户自定义想做的事情，<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.6新增）</span></td>
									<td>
										<pre class="layui-code" lay-title="changeSelect方法示例">
											dtree.on("changeSelect('demoTree')" ,function(obj){
											  console.log(obj.show); // 下拉树面板是否展开
											  console.log(obj.param); // 点击下拉树选中的参数集
											});
										</pre>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</fieldset>
			</div>
			
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="nzhsyl">
					<legend>内置函数一览</legend>
					<div class="layui-field-box">
						<p style="padding: 5px 0px;">内置函数大多是组件内部使用的函数，对于一般用户来说使用频率较低，但可重点查阅有示例以及红色标识的函数;</p>
						<p style="padding: 5px 0px;">要使用内置函数，必须先使用组件将树对象定义出来，在用定义出来的对象进行操作,如：var DemoTree = dtree.render({...}); ，则操作DemoTree对象</p>
						<p style="padding: 5px 0px;">函数名称：<span style="color:#01AAED;">蓝色</span>为可以被<a href="javascript:void(0);" data-id="jcff" class="position-a">基础方法（点击查看）</a>替代使用的函数，<span style="color:#FF5722;">红色</span>为大概率会使用的到的函数，黑色：可以使用的函数，<span style="color:#c2c2c2;">灰色</span>：不建议使用的函数</p>
						<p style="padding: 5px 0px;">类型释义：<span style="color:#FF5722;">String</span>：字符串，<span style="color:#FF5722;">Number</span>：数字，<span style="color:#FF5722;">Dom</span>：jquery选择器选中的元素，<span style="color:#FF5722;">Boolean</span>：布尔类型值，<span style="color:#FF5722;">Object</span>：JSON对象，<span style="color:#FF5722;">Array</span>：字符串数组 / JSON数组</p>
						<table class="layui-table" lay-size="sm">
							<colgroup><col width="30%"><col width="10%"><col width="20%"><col width="40%"></colgroup>
							<thead><tr><th>函数名称</th><th>参数类型</th><th>说明</th><th>用法示例</th></tr></thead>
							<tbody>
								<tr><td colspan="5"><span style="font-weight: bold;">树初始化及基本事件函数</span></td></tr>
								<tr id="escape1">
									<td><a href="javascript:void(0);" data-id="escape" class="position-a">DTree.prototype.escape</a></td>
									<td>String</td>
									<td>字符串格式化</td>
									<td>
										<pre class="layui-code" lay-title="escape方法示例">
											var str = DemoTree.escape("需要被格式化的文本");
											console.log(str);
										</pre>
									</td>
								</tr>
								<tr id="unescape1">
									<td><a href="javascript:void(0);" data-id="unescape" class="position-a">DTree.prototype.unescape</a></td>
									<td>String</td>
									<td>字符串反格式化</td>
									<td>
										<pre class="layui-code" lay-title="unescape方法示例">
											var str = DemoTree.unescape("需要被反格式化的文本");
											console.log(str);
										</pre>
									</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.setting</span></td>
									<td>Object</td>
									<td>设置树的参数</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.reloadSetting</span></td>
									<td>Object</td>
									<td>重新设置树的参数</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.renderSelect</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.5新增）</span></td>
									<td>Object</td>
									<td>初始化下拉树的参数</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.reloadSelectSetting</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.6新增）</span></td>
									<td>Object</td>
									<td>重新设置下拉树的基本参数</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.reloadSelectDom</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.6新增）</span></td>
									<td>Object</td>
									<td>，重新渲染下拉树的Dom结构</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.autoHeight</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>-</td>
									<td>自动设置树的高度</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.reload</span></td>
									<td>Object</td>
									<td>重新加载树</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.init</span></td>
									<td>-</td>
									<td>初始化树</td>
									<td>-</td>
								</tr>
								<tr id="rollbackHtml" >
									<td>DTree.prototype.rollbackHtml</td>
									<td>String</td>
									<td>基于备份的Html数据回滚，并且附上选中状态</td>
									<td>
										<pre class="layui-code" lay-title="rollbackHtml方法示例">
											//DemoTree.rollbackHtml("001");
											//DemoTree.rollbackHtml("001,002,004");
										</pre>
									</td>
								</tr>
								<tr id="getChild">
									<td>DTree.prototype.getChild</td>
									<td>Dom, Array</td>
									<td>加载子节点</td>
									<td>
										<pre class="layui-code" lay-title="getChild方法示例">
											//DemoTree.getChild($div);
											//DemoTree.getChild($div, arrayJson);
										</pre>
									</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.loadTreeInit</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.7新增）</span></td>
									<td>-</td>
									<td>初始化加载树</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.loadChildTreeInit</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.7新增）</span></td>
									<td>-</td>
									<td>初始化加载子节点</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.dataLoadTree</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.7新增）</span></td>
									<td>-</td>
									<td>用data加载树</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.asyncLoadTree</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.7新增）</span></td>
									<td>-</td>
									<td>异步加载树</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.loadListTree</span></td>
									<td>Object, Object, String/Number, Dom</td>
									<td>初始化树或者拼接树（list数据格式初始化）</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.queryListTreeByPid</span></td>
									<td>String, Object</td>
									<td>根据父ID查找list数据中匹配的元素</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.loadTree</span></td>
									<td>Object, Dom</td>
									<td>初始化树或者拼接树（默认数据格式初始化）</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.msgErrData</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>-</td>
									<td>判断在数据加载时是否存在错误数据，并是否打印错误数据</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.parseData</span></td>
									<td>Object</td>
									<td>解析data数据</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.getDom</span></td>
									<td>String, String, String, Boolean, String, Array, String, String, Boolean, Boolean</td>
									<td>新增节点的dom值</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.replaceDom</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>Dom, String, String, Boolean, Boolean, Boolean</td>
									<td>替换节点的dom值，或指定值</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.getLiItemDom</span></td>
									<td>String, String, String, Boolean, String, Array, String, String, Boolean, Boolean, String, String, Boolean</td>
									<td>新增节点拼接好的li</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.getNoneDom</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>-</td>
									<td>显示树提示信息</td>
									<td>-</td>
								</tr>
								<tr id="dataInit1">
									<td><a href="javascript:void(0);" data-id="dataInit" class="position-a">DTree.prototype.dataInit</a></td>
									<td>String</td>
									<td>初始化节点，用于数据回显</td>
									<td>
										<pre class="layui-code" lay-title="dataInit方法示例">
											DemoTree.dataInit("001");
										</pre>
									</td>
								</tr>
								<tr id="clickSpread">
									<td>DTree.prototype.clickSpread</td>
									<td>Dom</td>
									<td>展开或隐藏节点</td>
									<td>
										<pre class="layui-code" lay-title="clickSpread方法示例">
											DemoTree.clickSpread($div);
										</pre>
									</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.accordionUL</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>Dom</td>
									<td>开启手风琴模式时对其他节点的处理</td>
									<td>-</td>
								</tr>
								<tr id="navThis" >
									<td>DTree.prototype.fuzzySearch<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.7新增）</span></td>
									<td>String</td>
									<td>模糊查询，搜索节点，保留父节点</td>
									<td>
										<pre class="layui-code" lay-title="fuzzySearch方法示例">
											DemoTree.fuzzySearch(inputValue);
										</pre>
									</td>
								</tr>
								<tr id="navThis" >
									<td>DTree.prototype.navThis<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>Dom</td>
									<td>选中指定div</td>
									<td>
										<pre class="layui-code" lay-title="navThis方法示例">
											DemoTree.navThis($div);
										</pre>
									</td>
								</tr>
								<tr id="cancelNavThis" >
									<td>DTree.prototype.cancelNavThis<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>Dom</td>
									<td>取消选中div</td>
									<td>
										<pre class="layui-code" lay-title="cancelNavThis方法示例">
											DemoTree.cancelNavThis();
										</pre>
									</td>
								</tr>
								<tr id="setDisabledNodes" >
									<td><span style="color:#FF5722;">DTree.prototype.setDisabledNodes</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String/Array</td>
									<td>设置节点为disabled</td>
									<td>
										<pre class="layui-code" lay-title="setDisabledNodes方法示例">
											DemoTree.setDisabledNodes("001,002");
											DemoTree.setDisabledNodes(["001","002"]);
											DemoTree.setDisabledNodes(1);
										</pre>
									</td>
								</tr>
								<tr id="setDisabledNodes" >
									<td><span style="color:#FF5722;">DTree.prototype.setDisabledNode</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.7新增）</span></td>
									<td>Dom</td>
									<td>设置单个节点为disabled</td>
								</tr>
								<tr id="setDisabledAllNodes" >
									<td><span style="color:#FF5722;">DTree.prototype.setDisabledAllNodes</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.6新增）</span></td>
									<td>-</td>
									<td>设置全部节点为disabled</td>
									<td>
										<pre class="layui-code" lay-title="setDisabledNodes方法示例">
											DemoTree.setDisabledAllNodes();
										</pre>
									</td>
								</tr>
								<tr id="cancelDisabledNodes" >
									<td><span style="color:#FF5722;">DTree.prototype.cancelDisabledNodes</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String/Array</td>
									<td>将节点的disabled取消</td>
									<td>
										<pre class="layui-code" lay-title="cancelDisabledNodes方法示例">
											DemoTree.cancelDisabledNodes("001,002,003");
											DemoTree.cancelDisabledNodes(["001","002"]);
										</pre>
									</td>
								</tr>
								<tr id="cancelDisabledNode" >
									<td><span style="color:#FF5722;">DTree.prototype.cancelDisabledNode</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.7新增）</span></td>
									<td>Dom</td>
									<td>设置单个节点取消disabled</td>
								</tr>
								<tr id="getDisabledNodesParam" >
									<td><span style="color:#FF5722;">DTree.prototype.getDisabledNodesParam</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String/Array</td>
									<td>获取指定disabled节点的值</td>
									<td>
										<pre class="layui-code" lay-title="getDisabledNodesParam方法示例">
											var param = DemoTree.getDisabledNodesParam("001,003");
											var param = DemoTree.getDisabledNodesParam(["001","002"]);
											console.log(param);
										</pre>
									</td>
								</tr>
								<tr id="getAllDisabledNodesParam" >
									<td><span style="color:#FF5722;">DTree.prototype.getAllDisabledNodesParam</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>-</td>
									<td>获取全部disabled节点的值</td>
									<td>
										<pre class="layui-code" lay-title="getAllDisabledNodesParam方法示例">
											var param = DemoTree.getAllDisabledNodesParam();
											console.log(param);
										</pre>
									</td>
								</tr>
								<tr id="setHideNodes" >
									<td><span style="color:#FF5722;">DTree.prototype.setHideNodes</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String/Array</td>
									<td>设置节点为hide</td>
									<td>
										<pre class="layui-code" lay-title="setHideNodes方法示例">
											DemoTree.setHideNodes("001,002,003");
											DemoTree.setHideNodes(["001","002"]);
										</pre>
									</td>
								</tr>
								<tr id="setHideNode" >
									<td><span style="color:#FF5722;">DTree.prototype.setHideNode</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.7新增）</span></td>
									<td>Dom</td>
									<td>设置单个节点为hide</td>
								</tr>
								<tr id="cancelHideNodes" >
									<td><span style="color:#FF5722;">DTree.prototype.cancelHideNodes</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String/Array</td>
									<td>将节点的hide取消</td>
									<td>
										<pre class="layui-code" lay-title="cancelHideNodes方法示例">
											DemoTree.cancelHideNodes("001,002,003");
											DemoTree.cancelHideNodes(["001","002"]);
										</pre>
									</td>
								</tr>
								<tr id="cancelHideNode" >
									<td><span style="color:#FF5722;">DTree.prototype.cancelHideNode</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.7新增）</span></td>
									<td>Dom</td>
									<td>设置单个节点取消hide</td>
								</tr>
								<tr id="getHideNodesParam" >
									<td><span style="color:#FF5722;">DTree.prototype.getHideNodesParam</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String/Array</td>
									<td>获取指定hide节点的值</td>
									<td>
										<pre class="layui-code" lay-title="getHideNodesParam方法示例">
											var param = DemoTree.getHideNodesParam("001,002,003");
											var param = DemoTree.getHideNodesParam(["001","002"]);
											console.log(param);
										</pre>
									</td>
								</tr>
								<tr id="getAllHideNodesParam" >
									<td><span style="color:#FF5722;">DTree.prototype.getAllHideNodesParam</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>-</td>
									<td>获取全部hide节点的值</td>
									<td>
										<pre class="layui-code" lay-title="getAllHideNodesParam方法示例">
											var param = DemoTree.getAllHideNodesParam();
											console.log(param);
										</pre>
									</td>
								</tr>
								<tr id="refreshTree" >
									<td><span style="color:#FF5722;">DTree.prototype.refreshTree</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>-</td>
									<td>刷新树</td>
									<td>
										<pre class="layui-code" lay-title="refreshTree方法示例">
											DemoTree.refreshTree();
										</pre>
									</td>
								</tr>
								<tr id="partialRefreshAdd" >
									<td><span style="color:#FF5722;">DTree.prototype.partialRefreshAdd</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>Dom , Object</td>
									<td>局部刷新树--新增子节点时</td>
									<td>
										<pre class="layui-code" lay-title="partialRefreshAdd方法示例">
											//DemoTree.partialRefreshAdd($div);
											//DemoTree.partialRefreshAdd($div, json);
											//DemoTree.partialRefreshAdd($div, arr);
										</pre>
									</td>
								</tr>
								<tr id="partialRefreshEdit" >
									<td><span style="color:#FF5722;">DTree.prototype.partialRefreshEdit</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>Dom , Object</td>
									<td>局部刷新树--编辑当前节点选中节点时</td>
									<td>
										<pre class="layui-code" lay-title="partialRefreshEdit方法示例">
											//DemoTree.partialRefreshEdit($div);
											//DemoTree.partialRefreshEdit($div, json);
										</pre>
									</td>
								</tr>
								<tr id="partialRefreshDel" >
									<td><span style="color:#FF5722;">DTree.prototype.partialRefreshDel</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>Dom</td>
									<td>局部刷新树--当前节点选中被删除时</td>
									<td>
										<pre class="layui-code" lay-title="partialRefreshDel方法示例">
											//DemoTree.partialRefreshDel($div);
										</pre>
									</td>
								</tr>
								<tr ><td colspan="5"><span style="font-weight: bold;">下拉树函数</span></td></tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.selectVal</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.5新增）</span></td>
									<td>String</td>
									<td>设置下拉树的初始展示值</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.renderSelectDom</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.5新增）</span></td>
									<td>-</td>
									<td>渲染下拉树的Dom结构</td>
									<td>-</td>
								</tr>
								<tr ><td colspan="5"><span style="font-weight: bold;">字体及图标函数</span></td></tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.ensureTheme</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>-</td>
									<td>确认最终树使用的样式主题及图标</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.useDefaultOrUserDefineFnodeStyle</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String, Object</td>
									<td>赋值一级图标</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.useDefaultOrUserDefineSnodeStyle</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String, Object</td>
									<td>赋值二级图标</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.useDefaultOrUserDefineCheckboxStyle</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String, Object</td>
									<td>赋值复选框图标</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.useDefaultOrUserDefineMenubarStyle</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String, Object</td>
									<td>赋值菜单栏图标</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.useDefaultOrUserDefineMenubarExtStyle</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String, Object</td>
									<td>赋值扩展菜单栏图标</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.useDefaultOrUserDefineToolbarStyle</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String, Object</td>
									<td>赋值工具栏图标</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.useDefaultOrUserDefineToolbarExtStyle</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String, Object</td>
									<td>赋值扩展工具栏图标</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.operateIcon</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>Dom, Dom</td>
									<td>设置图标的展开关闭，以及展开时/关闭时是最后一级图标的处理</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.showLine</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>ArrayDom</td>
									<td>展开树线</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.showLineLi</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>Dom</td>
									<td>设置树线</td>
									<td>-</td>
								</tr>
								<tr><td colspan="5"><span style="font-weight: bold;">复选框函数</span></td></tr>
								<tr id="chooseDataInit1">
									<td><a href="javascript:void(0);" data-id="chooseDataInit" class="position-a">DTree.prototype.chooseDataInit</a></td>
									<td>String/Array</td>
									<td>初始化复选框的值</td>
									<td>
										<pre class="layui-code" lay-title="chooseDataInit方法示例">
											DemoTree.chooseDataInit("001,002,003");
											DemoTree.chooseDataInit(["001","002","003"]);
											DemoTree.chooseDataInit(123);
										</pre>
									</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.checkAllOrNot</span></td>
									<td>Dom</td>
									<td>复选框点击，子集选中父级也选中</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.checkAllOrNoallOrNot</span></td>
									<td>Dom</td>
									<td>复选框点击， no-all 子集选中父级半选中，子集全选父级选中</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.checkAllOrPcascOrNot</span></td>
									<td>Dom</td>
									<td>复选框点击，p-casc：父级选中子集全选，子集无法改变父级选中状态</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.checkOrNot</span></td>
									<td>Dom</td>
									<td>复选框点击，self：各自选中互不影响</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.checkOnly</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.4.5_finally新增）</span></td>
									<td>Dom</td>
									<td>复选框点击，only：仅存一个</td>
									<td>-</td>
								</tr>
								<tr id="changeCheck">
									<td><span style="color:#FF5722;">DTree.prototype.changeCheck</span></td>
									<td>-</td>
									<td>改变复选框当前选中状态</td>
									<td>
										<pre class="layui-code" lay-title="changeCheck方法示例">
											//该方法适用于在checkbar的chooseBefore回调中
											DemoTree.changeCheck(); // 根据定义的级联关系，改变复选框当前选中状态
										</pre>
									</td>
								</tr>
								<tr id="initNoAllCheck1">
									<td><a href="javascript:void(0);" data-id="initNoAllCheck" class="position-a">DTree.prototype.initNoAllCheck</a></td>
									<td>-</td>
									<td>复选框半选状态初始化设置</td>
									<td>
										<pre class="layui-code" lay-title="initNoAllCheck方法示例">
											//该方法适用于树加载完毕后，回显上级菜单的半选/选中状态
											DemoTree.initNoAllCheck();
										</pre>
									</td>
								</tr>
								<tr id="initAllCheck1">
									<td><a href="javascript:void(0);" data-id="initAllCheck" class="position-a">DTree.prototype.initAllCheck</a></td>
									<td>-</td>
									<td>复选框选中状态初始化设置</td>
									<td>
										<pre class="layui-code" lay-title="initAllCheck方法示例">
											//该方法适用于树加载完毕后，回显上级菜单的选中状态
											 DemoTree.initAllCheck();
										</pre>
									</td>
								</tr>
								<tr id="checkStatus">
									<td><span style="color:#FF5722;">DTree.prototype.checkStatus</span></td>
									<td>Dom</td>
									<td>设置复选框选中/未选中/半选</td>
									<td>
										<pre class="layui-code" lay-title="checkStatus方法示例">
											//该方法适用于在checkbar的chooseBefore回调中,或者你想手动触发复选框选中时
											DemoTree.checkStatus($i).check(); // 当前复选框选中
											DemoTree.checkStatus($i).noCheck(); // 当前复选框未选中
											DemoTree.checkStatus($i).noallCheck(); // 当前复选框半选中
										</pre>
									</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.setAndGetCheckbarNodesParam</span></td>
									<td>-</td>
									<td>设置树的复选框操作值的全部参数,并获取</td>
									<td>-</td>
								</tr>
								<tr id="getCheckbarNodesParam1">
									<td><a href="javascript:void(0);" data-id="getCheckbarNodesParam" class="position-a">DTree.prototype.getCheckbarNodesParam</a></td>
									<td>Boolean</td>
									<td>获取树的复选框操作值的全部参数</td>
									<td>
										<pre class="layui-code" lay-title="getCheckbarNodesParam方法示例">
											var param = DemoTree.getCheckbarNodesParam();
											console.log(param);
										</pre>
									</td>
								</tr>
								<tr id="getCheckbarJsonArrParam" >
									<td>DTree.prototype.getCheckbarJsonArrParam<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.6新增）</span></td>
									<td>-</td>
									<td>获取基于返回参数的树的复选框参数数组</td>
									<td>
										<pre class="layui-code" lay-title="getCheckbarJsonArrParam方法示例">
											var param = DemoTree.getCheckbarJsonArrParam();
											console.log(param);
										</pre>
									</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.getCheckbarNodeParam</span></td>
									<td>Dom,Dom</td>
									<td>获取树的一个复选框的参数</td>
									<td>-</td>
								</tr>
								<tr id="changeCheckbarNodes1">
									<td><a href="javascript:void(0);" data-id="changeCheckbarNodes" class="position-a">DTree.prototype.changeCheckbarNodes</a></td>
									<td>-</td>
									<td>判断复选框是否发生变更</td>
									<td>
										<pre class="layui-code" lay-title="changeCheckbarNodes方法示例">
											var flag = DemoTree.changeCheckbarNodes();
											console.log(flag);
										</pre>
									</td>
								</tr>
								<tr id="clickNodeCheckbar">
									<td>DTree.prototype.clickNodeCheckbar<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.5新增）</span></td>
									<td>string</td>
									<td>点击节点选择复选框</td>
									<td>
										<pre class="layui-code" lay-title="changeCheckbarNodes方法示例">
											DemoTree.clickNodeCheckbar("001");
										</pre>
									</td>
								</tr>
								<tr id="checkAllNode" >
									<td>DTree.prototype.checkAllNode<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.6新增）</span></td>
									<td>-</td>
									<td>复选框全选</td>
									<td>
										<pre class="layui-code" lay-title="checkAllNode方法示例">
											DemoTree.checkAllNode();
										</pre>
									</td>
								</tr>
								<tr id="cancelCheckedNode" >
									<td>DTree.prototype.cancelCheckedNode<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.6新增）</span></td>
									<td>-</td>
									<td>取消全部复选框选中</td>
									<td>
										<pre class="layui-code" lay-title="cancelCheckedNode方法示例">
											DemoTree.cancelCheckedNode();
										</pre>
									</td>
								</tr>
								<tr id="invertCheckedNode" >
									<td>DTree.prototype.invertCheckedNode<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.6新增）</span></td>
									<td>-</td>
									<td>反选复选框</td>
									<td>
										<pre class="layui-code" lay-title="invertCheckedNode方法示例">
											DemoTree.invertCheckedNode();
										</pre>
									</td>
								</tr>
								<tr id="removeCheckedNode" >
									<td>DTree.prototype.removeCheckedNode<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.6新增）</span></td>
									<td>-</td>
									<td>删除选中节点</td>
									<td>
										<pre class="layui-code" lay-title="removeCheckedNode方法示例">
											DemoTree.removeCheckedNode();
										</pre>
									</td>
								</tr>
								<tr><td colspan="5"><span style="font-weight: bold;">工具栏及菜单栏函数</span></td></tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.initTreePlus</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.4.5_finally_beta新增）</span></td>
									<td>-</td>
									<td>初始化菜单栏和工具栏的div</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.openTreePlus</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.4.5_finally_beta新增）</span></td>
									<td>-</td>
									<td>开启工具栏和菜单栏</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.getMenubarDom</span></td>
									<td>-</td>
									<td>获取菜单栏</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.getExtMenubarDom</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.4.5_finally_beta新增）</span></td>
									<td>-</td>
									<td>获取扩展菜单栏</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.getMenubarToolDom</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.4.5_finally_beta新增）</span></td>
									<td>-</td>
									<td>获取依附在工具栏的菜单栏</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.getExtMenubarToolDom</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.4.5_finally_beta新增）</span></td>
									<td>-</td>
									<td>获取依附在工具栏的扩展菜单栏</td>
									<td>-</td>
								</tr>
								<tr id="menubarMethod">
									<td>DTree.prototype.menubarMethod<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.4.5_finally_beta新增）</span></td>
									<td>-</td>
									<td><span style="color:#c2c2c2;">menubar内置调用方法</span></td>
									<td>
										<pre class="layui-code" lay-title="menubarMethod方法示例">
											DemoTree.menubarMethod().openAllNode($jquery); // 展开所有节点
											DemoTree.menubarMethod().closeAllNode(); // 收缩所有节点
											DemoTree.menubarMethod().refreshTree(); // 刷新树
											DemoTree.menubarMethod().checkAll(); // 全选节点
											DemoTree.menubarMethod().unCheckAll(); // 全不选节点
											DemoTree.menubarMethod().invertAll(); // 反选节点
											DemoTree.menubarMethod().remove(); // 删除选中节点
											DemoTree.menubarMethod().searchNode(); // 模糊查询该值，展开该值节点
										</pre>
									</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.menubarListener</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.4.5_finally_beta新增）</span></td>
									<td>-</td>
									<td>menubar内置监听</td>
									<td>-</td>
								</tr>
								<tr id="searchNode">
									<td>DTree.prototype.searchNode</td>
									<td>-</td>
									<td>模糊查询该值，展开该值节点（内置方法调用的真正查询方法）</td>
									<td>
										<pre class="layui-code" lay-title="searchNode方法示例">
											DemoTree.searchNode(); // 模糊查询该值，展开该值节点
										</pre>
									</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.getToolbarDom</span></td>
									<td>-</td>
									<td>获取工具栏</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.setToolbarDom</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.4.5新增）</span></td>
									<td>Object</td>
									<td>设置工具栏</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.loadToolBar</span></td>
									<td>String, String</td>
									<td>加载toolBar中的内容</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.toolbarHide</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>-</td>
									<td>隐藏toolbar</td>
									<td>-</td>
								</tr>
								<tr id="toolbarMethod" >
									<td>DTree.prototype.toolbarMethod<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>-</td>
									<td>toolbar内置调用方法</td>
									<td>
										<pre class="layui-code" lay-title="toolbarMethod方法示例">
											DemoTree.toolbarMethod().pulldown($jquery); // 展开当前节点下的所有节点
											DemoTree.toolbarMethod().pullup($jquery); // 收缩当前节点下的所有节点
										</pre>
									</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.toolbarListener</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String, Dom</td>
									<td>toolbar内置监听</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.loadToolBarDetail</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.4.5_finally_beta新增）</span></td>
									<td>-</td>
									<td>获取toolbar详细的标签信息</td>
									<td>-</td>
								</tr>
								<tr >
									<td><span style="color:#c2c2c2;">DTree.prototype.dynamicToolbarDom</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>Dom</td>
									<td>在节点后动态绑定fixed和follow条件的工具栏</td>
									<td>-</td>
								</tr>
								<tr id="changeTreeNodeAdd">
									<td><span style="color:#FF5722;">DTree.prototype.changeTreeNodeAdd</span></td>
									<td>String / Object</td>
									<td>新增节点后改变节点内容</td>
									<td>
										<pre class="layui-code" lay-title="changeTreeNodeAdd方法示例">
											//该方法适用于在toolbar的addTreeNode回调中，获取后台返回数据改变树的状态，入参一共有四种
											//DemoTree.changeTreeNodeAdd(param); // 添加成功，返回一个JSON对象
											//DemoTree.changeTreeNodeAdd(treeNode.nodeId); // 添加成功，返回ID
											//DemoTree.changeTreeNodeAdd(true/false); // 添加成功/失败
											//DemoTree.changeTreeNodeAdd("refresh"); // 添加成功，局部刷新树
										</pre>
									</td>
								</tr>
								<tr id="changeTreeNodeEdit">
									<td><span style="color:#FF5722;">DTree.prototype.changeTreeNodeEdit</span></td>
									<td>Boolean</td>
									<td>编辑节点后改变节点内容</td>
									<td>
										<pre class="layui-code" lay-title="changeTreeNodeEdit方法示例">
											//该方法适用于在toolbar的editTreeNode回调中，获取后台返回数据改变树的状态，入参一共有三种
											//DemoTree.changeTreeNodeEdit(true/false);// 修改成功/失败
											//DemoTree.changeTreeNodeEdit(result.param); // 修改成功，返回一个JSON对象
										</pre>
									</td>
								</tr>
								<tr id="changeTreeNodeDel">
									<td><span style="color:#FF5722;">DTree.prototype.changeTreeNodeDel</span></td>
									<td>Boolean</td>
									<td>删除节点后改变节点内容</td>
									<td>
										<pre class="layui-code" lay-title="changeTreeNodeDel方法示例">
											//该方法适用于在toolbar的delTreeNode回调中，获取后台返回数据改变树的状态，入参一共有两种
											//DemoTree.changeTreeNodeDel(true/false); // 删除成功/失败
										</pre>
									</td>
								</tr>
								<tr id="changeTreeNodeDone">
									<td><span style="color:#FF5722;">DTree.prototype.changeTreeNodeDone</span></td>
									<td>Object</td>
									<td>编辑页打开后显示编辑页内容</td>
									<td>
										<pre class="layui-code" lay-title="changeTreeNodeDone方法示例">
											//该方法适用于在toolbar的editTreeLoad回调中，获取后台返回数据改变树的状态
											DemoTree.changeTreeNodeDone(param);
											//param格式说明：为JSON格式，其中key为你配置的toolbarBtn中的name，值则为name需要回显的值。
										</pre>
									</td>
								</tr>
								<tr><td colspan="5"><span style="font-weight: bold;">iframe函数</span></td></tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.loadIframe</span></td>
									<td>Dom, Object</td>
									<td>加载iframe</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.getIframeRequestParam</span></td>
									<td>Object</td>
									<td>获取传递出去的参数，根据iframe.iframeDefaultRequest、iframe.iframeRequest和node拼出发出请求的参数</td>
									<td>-</td>
								</tr>
								<tr><td colspan="5"><span style="font-weight: bold;">数据回调函数</span></td></tr>
								<tr id="getNodeDom" >
									<td><span style="color:#FF5722;">DTree.prototype.getNodeDom</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String / Dom</td>
									<td>根据具体的id获取基于当前id的div以及对应的其他dom元素。<br>
										如果id就是一个$div，则就是这个div，如果不是则进行选取div，如果选不中则为null。<br>
										该方法可以替代getNowNodeUl、getNowNode、getNode、getNowNodeOrNull的功能<br>
									</td>
									<td>
										<pre class="layui-code" lay-title="getNodeDom方法示例">
											var $div = DemoTree.getNodeDom("001").div(); //获取data-id是001的div
											var $div1 = DemoTree.getNodeDom($div).div(); //Dom也可以当做入参传递，一下方法只演示一种。
											var $cite = DemoTree.getNodeDom("001").cite(); //获取文本存储元素
											var $fnode = DemoTree.getNodeDom("001").fnode(); //获取一级图标元素
											var $snode = DemoTree.getNodeDom("001").snode(); //获取二级图标元素
											var $checkbox = DemoTree.getNodeDom("001").checkbox(); //获取复选框元素集合
											var $nextUl = DemoTree.getNodeDom("001").nextUl(); //获取相邻的ul元素
											var $parentLi = DemoTree.getNodeDom("001").parentLi(); //获取父级li元素
											var $parentDiv = DemoTree.getNodeDom("001").parentDiv(); //获取基于当前$div的上级$div
											var $nowDiv =  DemoTree.getNodeDom().nowDiv(); //获取当前选中$div，没有则返回null
											var $nowOrRootDiv = DemoTree.getNodeDom().nowOrRootDiv(); //获取当前选中$div，没有则返回根节点下的第一个$div
											var $nowOrRootUl = DemoTree.getNodeDom().nowOrRootUl(); //获取当前选中$div的nextUl， 或根节点ul。为了将新节点放入ul下
										</pre>
									</td>
								</tr>
								<tr id="getNowNodeUl">
									<td>DTree.prototype.getNowNodeUl</td>
									<td>-</td>
									<td>获取当前选中节点下一个UL 或根节点。为了将新节点放入ul下</td>
									<td>
										<pre class="layui-code" lay-title="getNowNodeUl方法示例">
											var $ul = DemoTree.getNowNodeUl();
											console.log($ul);
										</pre>
									</td>
								</tr>
								<tr id="getNowNode">
									<td>DTree.prototype.getNowNode</td>
									<td>-</td>
									<td>获取当前选中节点,或根节点</td>
									<td>
										<pre class="layui-code" lay-title="getNowNode方法示例">
											var $div = DemoTree.getNowNode();
											console.log($div);
										</pre>
									</td>
								</tr>
								<tr id="getNode" >
									<td>DTree.prototype.getNode<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String</td>
									<td>获取指定Id的节点</td>
									<td>
										<pre class="layui-code" lay-title="getNode方法示例">
											var $div = DemoTree.getNode("001");
											console.log($div);
										</pre>
									</td>
								</tr>
								<tr id="getNowNodeOrNull" >
									<td>DTree.prototype.getNowNodeOrNull<br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>-</td>
									<td>获取当前选中节点，没有选中则为null</td>
									<td>
										<pre class="layui-code" lay-title="getNowNodeOrNull方法示例">
											var $div = DemoTree.getNowNodeOrNull();
											console.log($div);
										</pre>
									</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.setNodeParam</span></td>
									<td>Dom</td>
									<td>设置当前选中节点的全部参数</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.getNodeParam</span></td>
									<td>Dom</td>
									<td>获取当前选中节点的全部参数</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.getTempNodeParam</span></td>
									<td>Dom</td>
									<td>获取一个临时的node参数</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.initNodeParam</span></td>
									<td>-</td>
									<td>重置参数</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.getRequestParam</span></td>
									<td>Object</td>
									<td>获取传递出去的参数，根据defaultRequest、request和node拼出发出请求的参数</td>
									<td>-</td>
								</tr>
								<tr id="getNowParam1">
									<td><a href="javascript:void(0);" data-id="getNowParam" class="position-a">DTree.prototype.getNowParam</a></td>
									<td>-</td>
									<td>获取当前选中值</td>
									<td>
										<pre class="layui-code" lay-title="getNowParam方法示例">
											var param = DemoTree.getNowParam();
											console.log(param);
										</pre>
									</td>
								</tr>
								<tr id="getParam1" >
									<td><a href="javascript:void(0);" data-id="getParam" class="position-a">DTree.prototype.getParam</a><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String / Dom</td>
									<td>获取指定节点选中值</td>
									<td>
										<pre class="layui-code" lay-title="getParam方法示例">
											//var param = DemoTree.getParam("001");
											//var param = DemoTree.getParam($div);  //指定的一个Dom对象
											console.log(param);
										</pre>
									</td>
								</tr>
								<tr id="getParentParam1">
									<td><a href="javascript:void(0);" data-id="getParentParam" class="position-a">DTree.prototype.getParentParam</a></td>
									<td>String / Dom</td>
									<td>获取参数的上级节点</td>
									<td>
										<pre class="layui-code" lay-title="getParentParam方法示例">
											//var param = DemoTree.getParentParam("001");
											//var param = DemoTree.getParentParam($div);  //指定的一个Dom对象
											console.log(param);
										</pre>
									</td>
								</tr>
								<tr id="getAllParentParam1" >
									<td><a href="javascript:void(0);" data-id="getAllParentParam" class="position-a">DTree.prototype.getAllParentParam</a><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></td>
									<td>String / Dom</td>
									<td>获取参数的全部上级节点</td>
									<td>
										<pre class="layui-code" lay-title="getAllParentParam方法示例">
											//var param = DemoTree.getAllParentParam("001");
											//var param = DemoTree.getAllParentParam($div);  //指定的一个Dom对象
											console.log(param);
										</pre>
									</td>
								</tr>
								<tr id="getChildParam1">
									<td><a href="javascript:void(0);" data-id="getChildParam" class="position-a">DTree.prototype.getChildParam</a></td>
									<td>String / Dom</td>
									<td>获取下级节点的node参数集</td>
									<td>
										<pre class="layui-code" lay-title="getChildParam方法示例">
											//var param = DemoTree.getChildParam("001");
											//var param = DemoTree.getChildParam($div);  //指定的一个Dom对象
											console.log(param);
										</pre>
									</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.callbackData</span></td>
									<td>Object</td>
									<td>获取回调数据</td>
									<td>-</td>
								</tr>
								<tr><td colspan="5"><span style="font-weight: bold;">事件绑定函数</span></td></tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.bindBrowserEvent</span></td>
									<td>-</td>
									<td>绑定浏览器事件</td>
									<td>-</td>
								</tr>
								<tr>
									<td><span style="color:#c2c2c2;">DTree.prototype.unbindBrowserEvent</span><br/><span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.4.5_finally_beta新增）</span></td>
									<td>-</td>
									<td>解绑浏览器事件</td>
									<td>-</td>
								</tr>
							</tbody>
						</table>
					</div>
				</fieldset>
			</div>
			
			<div class="layui-fluid">
				<blockquote class="layui-elem-quote">文档到此结束，看的不过瘾，或者还是一知半解？请移步案例演示，我将手把手教你如何使用dtree组件。</blockquote>
			</div>
		</div>
	</div>

</body>
<script type="text/javascript" src="basicDocMenu.js"></script>
<script type="text/javascript" src="../depend/version.js"></script>
<script type="text/javascript">
	layui.extend({
		dtree: '{/}../layui_ext/dtree/dtree'  //实际情况下将该路径指定为自己的路径
	}).use(['element','layer', 'table', 'code' ,'util', 'dtree'], function(){
		var element = layui.element,
			layer = layui.layer,
			table = layui.table,
			util = layui.util,
			dtree = layui.dtree,
			$ = layui.$;
		
		layui.code();	// 代码修饰器
		util.fixbar();	// 置顶按钮
		
		// 右侧弹出层
		layer.open({
			type: 1,
			title: "目录",
			content: '<ul id="menuTree" class="dtree" data-id="menuTree" style="width:210px;"></ul>',
			area:["200px", "500px"],
			offset:["50px","84%"],
			resize: false,
			shade: 0,
			success: function(layero, index){
				var DTree = dtree.render({
					elem: "#menuTree",
					data: menuTree,
					type: "all",
					icon: "-1",
					initLevel: "3",
					formatter: {
						title: function(data){
							var tt = data.title;
							var tts = ["异步数据接口规范","select加载配置","初始化下拉树","selectInputName","changeSelect","rollbackHtml","setDisabledAllNodes","getCheckbarJsonArrParam","序列化JSON对象","获取复选框选中值1"];
							for(var i=0; i<tts.length; i++) {
								if(tt == tts[i]) {
									tt += "&nbsp;<span class='layui-badge-dot'></span>";
								}
							}
							return tt;
						}
					}
				});
				
				dtree.on('node("menuTree")', function(obj){
					var nodeId = obj.param.nodeId;
					$("html, body").animate({ scrollTop: $("#"+nodeId).offset().top-50 }, {duration: 500,easing: "swing"});
				});
			}
		});
		
		// 绑定表格链接点击事件
		$(".position-a").click(function(){
			var nodeId = $(this).attr("data-id");
			$("html, body").animate({ scrollTop: $("#"+nodeId).offset().top-50 }, {duration: 500,easing: "swing"});
		})
		
		// 1.demoTree
		var DemoTree = dtree.render({
			elem: "#demoTree",
			data: demoTree,
			type: "all",
			initLevel: "2"
		});
		
		dtree.on("node('demoTree')" ,function(obj){
		  layer.msg(JSON.stringify(obj.param));
		  /* var id = obj.param.nodeId;
		  var arr = dtree.getAllParentParam("demoTree", id);
		  layer.msg(JSON.stringify(arr)); */
		});
		
	});
</script>
</html>